JavaScript HTML DOM 节点列表

JavaScript HTML DOM 是一种用于动态操作 HTML 文档的技术，通过 HTML DOM，我们可以轻松地访问和修改 HTML 文档中的元素。

在 HTML DOM 中，我们可以使用节点列表来操纵 HTML 文档中的元素。节点列表是一个包含一系列节点的对象集合，其中每个节点都是一个单独的 HTML 元素。节点列表可以用于查找特定类型或特定类别的元素。

以下是节点列表的常用方法：

节点列表的 length 属性返回节点列表中节点的数量。

var list = document.getElementsByTagName('li');
console.log(list.length);

item() 方法返回节点列表中指定索引位置的节点。索引从 0 开始。

var list = document.getElementsByTagName('li');
console.log(list.item(0));

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 文档中的元素，从而实现更加灵活和动态的网页设计。