元素节点对应HTML标签,可通过document.getElementById()、createElement()和appendChild()操作;2. 文本节点表示元素内的文本内容,如“Hello World”,可用textContent或createTextNode()处理;3. 属性节点代表元素的属性如id、class,通过getAttribute()、setAttribute()等方法访问或修改。

在JavaScript中,DOM(文档对象模型)将HTML文档表示为节点树,每个节点都是一个对象,代表文档的一部分。常见的三种节点类型是:元素节点、文本节点和属性节点。
元素节点
元素节点对应HTML中的标签,比如 <div>、<p>、<a> 等。每个标签都会生成一个元素节点。
通过以下方式可以获取或创建元素节点:
- document.getElementById() —— 根据ID获取元素节点
- document.createElement() —— 创建新的元素节点
- parentNode.appendChild() —— 添加元素节点到父节点中
文本节点
文本节点是元素节点内部的文本内容。例如,在 <p>Hello World</p> 中,“Hello World”就是一个文本节点。
文本节点没有子节点,是最基本的内容单元。
可以通过以下方式操作文本节点:
- element.textContent —— 获取或设置元素的文本内容
- element.childNodes[0] —— 如果第一个子节点是文本,可通过此访问
- document.createTextNode() —— 创建一个新的文本节点
属性节点
属性节点表示元素的属性,如 class、id、href 等。它们属于元素节点的一部分,但不是子节点。
属性节点可以通过以下方式访问或修改:
- element.getAttribute('attrName') —— 获取属性值
- element.setAttribute('attrName', 'value') —— 设置或添加属性
- element.removeAttribute('attrName') —— 删除属性
- element.attributes —— 返回所有属性节点的集合
基本上就这些。理解这三种基本节点类型有助于更好地操作网页结构和内容。










