HTML DOM 节点

什么是HTML DOM 节点？

HTML DOM节点是HTML文档的不同部分 (HTML标签，HTML元素，HTML属性等）的对象表示。它是JavaScript可以访问和操作的HTML文档的标准化编程接口。

HTML DOM节点包含有关元素的信息，例如标记名称，属性和文本内容。这种节点可以是 HTML元素，HTML属性，文本节点，注释等。

节点层次结构

节点层次结构是指HTML文档中节点之间的父子关系。

例如，body元素是HTML文档的根节点，它是所有其他元素的父节点。h1、 p和ul 元素都是body元素的子元素。

HTML DOM文档中的所有节点都是相互关联的，并可以通过 JavaScript 编程语言来访问和操作。

HTML DOM节点属性

HTML DOM节点拥有许多不同的属性，其中一些常用的属性包括:

• nodeName - 节点的名称。
• nodeValue - 节点的值。
• nodeType - 节点的类型。
• parentNode - 节点的父节点。
• childNodes - 节点的子节点。
• firstChild - 节点的第一个子节点。
• lastChild - 节点的最后一个子节点。
• nextSibling - 节点的下一个兄弟节点。
• previousSibling - 节点的上一个兄弟节点。
• attributes - 节点的属性。

HTML DOM节点操作

HTML DOM节点可以通过 JavaScript 编程语言来访问和操作。一些常用的节点操作包括:

创建新的HTML元素

使用document.createElement() 方法可以创建新的HTML元素。例如，要创建一个新的段落标记，可以使用以下代码:

let newParagraph = document.createElement('p');

添加节点

可以使用appendChild() 或 insertBefore() 方法将新的HTML元素添加到现有的父节点中。

let newParagraph = document.createElement('p');

// 将段落添加到body元素中
document.body.appendChild(newParagraph);

删除节点

要从HTML文档中删除节点，可以使用removeChild() 方法。

let oldParagraph = document.getElementById('oldParagraph');
document.body.removeChild(oldParagraph);

替换节点

可以使用replaceChild() 方法将节点替换为新的节点。

let newParagraph = document.createElement('p');
newParagraph.textContent = 'This is the new paragraph';

let oldParagraph = document.getElementById('oldParagraph');
document.body.replaceChild(newParagraph, oldParagraph);

修改节点属性

可以使用setAttribute() 或 removeAttribute() 方法修改节点的属性。

let element = document.getElementById('myElement');

// 添加一个class属性
element.setAttribute('class', 'highlight');

// 删除class属性
element.removeAttribute('class');

总结

HTML DOM 节点是HTML文档中的不同部分的对象表示。它们包含有关元素的信息，并可以通过 JavaScript 编程语言来访问和操作。常用的节点属性和操作包括创建新的HTML元素，添加、删除、替换节点和修改节点的属性。要使用HTML DOM节点，需要了解HTML节点的层次结构以及节点的基本属性和操作方法。