一、常见的DOM操作
DOM(Document Object Model)是用来描述HTML文档结构的一种树形结构,通过它可以对HTML页面进行操作。JS创建DOM的方法有以下几种:
1. createElement()
这个方法可以在内存中创建一个新的HTML节点,并把它返回,但是在页面上不会显示。如果需要让它显示,还需要使用appendChild()方法将它添加到其他节点上。
var newP = document.createElement('p');
newP.innerHTML = '这是新的一段文字';
document.body.appendChild(newP);
2. createTextNode()
这个方法可以创建一个纯文本节点,也需要使用appendChild()方法将它添加到其他节点上。
var textNode = document.createTextNode('这是纯文本');
document.body.appendChild(textNode);
3. setAttribute()
这个方法可以设置HTML节点的属性,包括class, id等等。
var newLink = document.createElement('a');
newLink.setAttribute('href', 'https://www.example.com');
newLink.innerHTML = '点击跳转';
document.body.appendChild(newLink);
4. removeChild()
这个方法可以删除一个节点。
var toBeDeleted = document.getElementById('toBeDeleted');
var parent = toBeDeleted.parentNode;
parent.removeChild(toBeDeleted);
二、通过innerHTML创建DOM
在JS中有一个innerHtml属性,它可以用来操作HTML节点,包括创建、修改、删除等操作。以下是通过innerHTML属性创建HTML节点的例子:
var newDiv = document.createElement('div');
newDiv.innerHTML = '<p>这是新的一段文字。</p>';
document.body.appendChild(newDiv);
三、插入节点
在JS中有两个方法可以用来插入节点,一个是appendChild()方法,一个是insertBefore()方法。以下分别对它们进行介绍:
1. appendChild()
这个方法可以把一个节点添加到另一个节点的最后面。
var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.appendChild(child);
2. insertBefore()
这个方法可以把一个节点添加到另一个节点的指定位置。
var parent = document.getElementById('parent');
var newChild = document.createElement('div');
newChild.innerHTML = '<p>这是新的一段文字。</p>';
var child = document.getElementById('child');
parent.insertBefore(newChild, child);
四、操作节点的样式、类、ID
JS也可以通过DOM操作节点的样式、类、ID等等。以下是具体的例子:
1. 操作节点样式
var elem = document.getElementById('myDiv');
elem.style.color = 'red';
elem.style.backgroundColor = 'blue'
2. 操作节点类名
var elem = document.getElementById('myDiv');
elem.className = 'newClass';
3. 操作节点ID
var elem = document.getElementById('myDiv');
elem.id = 'newId';
五、事件监听器
JS可以通过事件监听器来响应页面上的用户操作。以下是一个具体的例子:
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
alert('Hello World!');
});
这个例子中,当用户点击id为myButton的按钮时,会弹出一个包含“Hello World!”文字的对话框。