在JavaScript中操作DOM节点时，掌握节点的常用属性是进行节点信息读取、关系判断和内容修改的基础，不同的属性对应不同的节点特征和操作能力，下面逐一介绍这些常用属性。
节点基础信息属性
nodeType
该属性返回节点的类型，用数字表示，不同类型的节点对应不同的数值，常见节点类型如下：
- 元素节点：返回1
- 属性节点：返回2
- 文本节点：返回3
- 注释节点：返回8
- 文档节点：返回9
可以通过该属性判断当前节点的类型，示例代码如下：
// 获取页面中的div元素
const divEle = document.querySelector('div');
console.log(divEle.nodeType); // 输出1，代表元素节点
// 获取div元素的第一个子节点
const firstChild = divEle.firstChild;
console.log(firstChild.nodeType); // 如果第一个子节点是文本，输出3
nodeName
该属性返回节点的名称，不同类型的节点返回的nodeName值不同：
- 元素节点：返回大写的标签名，比如<div>元素返回DIV
- 文本节点：返回#text
- 注释节点：返回#comment
- 文档节点：返回#document
示例代码如下：
const divEle = document.querySelector('div');
console.log(divEle.nodeName); // 输出DIV
const textNode = document.createTextNode('测试文本');
console.log(textNode.nodeName); // 输出#text
nodeValue
该属性返回或设置节点的值，不同节点的nodeValue表现不同：
- 元素节点：返回null
- 文本节点：返回文本内容
- 属性节点：返回属性值
示例代码如下：
const divEle = document.querySelector('div');
console.log(divEle.nodeValue); // 输出null
const textNode = divEle.firstChild;
if (textNode.nodeType === 3) {
console.log(textNode.nodeValue); // 输出文本节点的内容
textNode.nodeValue = '修改后的文本'; // 修改文本内容
}
节点关系属性
parentNode
该属性返回当前节点的父节点，如果当前节点没有父节点（比如文档节点），则返回null。
const spanEle = document.querySelector('span');
const parent = spanEle.parentNode;
console.log(parent.nodeName); // 输出span的父节点标签名
childNodes
该属性返回当前节点的所有子节点组成的类数组对象，包含元素节点、文本节点、注释节点等所有类型的子节点。
const divEle = document.querySelector('div');
const children = divEle.childNodes;
console.log(children.length); // 输出子节点的数量
// 遍历所有子节点
for (let i = 0; i < children.length; i++) {
console.log(children[i].nodeName);
}
firstChild和lastChild
firstChild返回当前节点的第一个子节点，lastChild返回当前节点的最后一个子节点，如果没有子节点则返回null。
const divEle = document.querySelector('div');
console.log(divEle.firstChild); // 第一个子节点
console.log(divEle.lastChild); // 最后一个子节点
nextSibling和previousSibling
nextSibling返回当前节点的下一个相邻兄弟节点，previousSibling返回当前节点的上一个相邻兄弟节点，没有对应节点时返回null。
const liEle = document.querySelectorAll('li')[0];
console.log(liEle.nextSibling); // 下一个兄弟节点
console.log(liEle.previousSibling); // 上一个兄弟节点
内容相关常用属性
innerHTML
该属性用于获取或设置元素节点内部的HTML内容，设置时会解析内容中的HTML标签。
const divEle = document.querySelector('div');
// 获取内部HTML内容
console.log(divEle.innerHTML);
// 设置内部HTML内容
divEle.innerHTML = '<p>新的段落内容</p>';
innerText
该属性用于获取或设置元素节点内部的文本内容，设置时不会解析HTML标签，会直接将内容作为文本渲染。
const divEle = document.querySelector('div');
// 获取内部文本内容
console.log(divEle.innerText);
// 设置文本内容，<p>会作为普通文本显示
divEle.innerText = '<p>新的内容</p>';
textContent
该属性和innerText类似，用于获取或设置元素的文本内容，区别在于textContent会获取所有子节点的文本，包括script和style标签中的内容，而innerText会忽略不可见元素的内容。
const divEle = document.querySelector('div');
console.log(divEle.textContent);
divEle.textContent = '设置的文本内容';
元素属性相关
attributes
该属性返回元素节点的所有属性节点组成的类数组对象，可以通过该对象获取、修改元素的属性。
const divEle = document.querySelector('div');
// 获取所有属性
const attrs = divEle.attributes;
console.log(attrs.id); // 获取id属性
console.log(attrs['class'].value); // 获取class属性值
// 修改属性值
attrs.id.value = 'newId';
className和classList
className用于获取或设置元素的class属性值，classList是更方便的class操作对象，提供了add、remove、toggle等方法。
const divEle = document.querySelector('div');
// 使用className操作
console.log(divEle.className);
divEle.className = 'box active';
// 使用classList操作
divEle.classList.add('newClass'); // 添加class
divEle.classList.remove('active'); // 移除class
divEle.classList.toggle('visible'); // 切换class
DOM节点JavaScriptnodeTypenodeNameinnerHTML修改时间：2026-06-10 10:45:27