Js nodeType 属性全面解析

什么是 nodeType 属性

nodeType 属性返回一个数值，表示节点的类型。以下是 nodeType 常用的几种值：

nodeType 值	节点类型
1	元素节点
2	属性节点
3	文本节点
8	注释节点
9	文档节点

如何获取 nodeType 属性值

可以通过 JS 操作 DOM 对象，使用 nodeType 属性来获取相关节点的类型，如下所示：

获取元素节点的 nodeType 属性值

let elementNode = document.getElementById('id');
let nodeTypeValue = elementNode.nodeType;
console.log(nodeTypeValue); // 1

获取属性节点的 nodeType 属性值

属性节点是指元素节点的属性，例如 id、class 等。可以通过元素节点的 attributes 属性获取元素节点的所有属性，然后得到某个属性节点的 nodeType 属性值，如下所示：

let elementNode = document.getElementById('id');
let attributesList = elementNode.attributes;
let attributeNode = attributesList[0]; // 获取第一个属性节点
let nodeTypeValue = attributeNode.nodeType;
console.log(nodeTypeValue); // 2

获取文本节点的 nodeType 属性值

文本节点通常出现在元素节点的内部，例如 <p>文本节点</p> 中的 文本节点。可以通过元素节点的 childNodes 属性获取元素节点的所有子节点，然后得到某个文本节点的 nodeType 属性值，如下所示：

let elementNode = document.getElementById('id');
let childNodesList = elementNode.childNodes;
let textNode = childNodesList[0]; // 获取第一个文本节点
let nodeTypeValue = textNode.nodeType;
console.log(nodeTypeValue); // 3

总结

• nodeType 属性用于判断一个节点的类型。
• 常见的 nodeType 值有 1、2、3、8、9。
• 可以通过 JS 操作 DOM 对象，使用 nodeType 属性来获取相关节点的类型。

示例说明

示例一

• 场景：在网页中检测用户输入的内容，判断是否为链接地址。
• 思路：用户输入的内容是文本节点，如果用户输入的内容以 http:// 或 https:// 开头，就可以判断为链接地址。
• 代码：

let userInput = document.getElementById('input').value;
let textNode = document.createTextNode(userInput);
let firstPart = userInput.substr(0, 7);
let secondPart = userInput.substr(0, 8);
if (firstPart === 'http://' || secondPart === 'https://') {
  console.log('用户输入的内容是链接地址');
} else {
  console.log('用户输入的内容不是链接地址');
}

示例二

• 场景：在网页中根据用户操作对元素节点进行修改或删除。
• 思路：根据用户的操作方式（例如点击、拖动），获取相应的元素节点，然后根据元素节点的类型（例如元素节点、属性节点、文本节点等）进行指定的操作。
• 代码：

let targetElement = document.getElementById('id'); // 获取目标元素节点
let nodeTypeValue = targetElement.nodeType;
if (nodeTypeValue === 1) { // 元素节点
  // 修改元素节点的宽度、高度等属性
  targetElement.style.width = '100px';
  targetElement.style.height = '100px';
} else if (nodeTypeValue === 2) { // 属性节点
  // 删除属性节点
  targetElement.removeAttribute('class');
} else if (nodeTypeValue === 3) { // 文本节点
  // 修改文本节点的内容
  targetElement.nodeValue = '新的文本内容';
}