JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 是一种用于动态操作 HTML 文档的技术,通过 HTML DOM,我们可以轻松地访问和修改 HTML 文档中的元素。
在 HTML DOM 中,我们可以使用节点列表来操纵 HTML 文档中的元素。节点列表是一个包含一系列节点的对象集合,其中每个节点都是一个单独的 HTML 元素。节点列表可以用于查找特定类型或特定类别的元素。
以下是节点列表的常用方法:
length
节点列表的 length
属性返回节点列表中节点的数量。
var list = document.getElementsByTagName('li');
console.log(list.length);
item()
item()
方法返回节点列表中指定索引位置的节点。索引从 0 开始。
var list = document.getElementsByTagName('li');
console.log(list.item(0));
forEach()
forEach()
方法可以用于遍历节点列表中的每个节点。
var list = document.getElementsByTagName('li');
list.forEach(function(item, index){
console.log(item);
});
增加节点
可以通过 document.createElement()
方法创建一个新的节点,并通过 appendChild()
方法将其添加到节点列表中。
var li = document.createElement('li');
document.getElementsByTagName('ul')[0].appendChild(li);
删除节点
可以通过 removeChild()
方法从节点列表中删除指定节点。
var list = document.getElementsByTagName('li');
list[0].parentNode.removeChild(list[0]);
替换节点
可以通过 replaceChild()
方法将节点列表中的一个节点替换为另一个节点。
var newNode = document.createElement('li');
var oldNode = document.getElementsByTagName('li')[0];
oldNode.parentNode.replaceChild(newNode, oldNode);
以上是节点列表的常用方法。通过节点列表,我们可以轻松地查找、操作和修改 HTML 文档中的元素,从而实现更加灵活和动态的网页设计。