DOM节点类型列举

Epicurus
250 阅读2分钟

DOM节点类型列举

在 JavaScript 中，DOM（Document Object Model）节点是 HTML 或 XML 文档的基本构建块。每个节点都有一个 nodeType 属性，用于标识节点的类型。以下是常见的 DOM 节点类型及其对应的 nodeType 值：

  1. 元素节点 (Element)

  • nodeType: 1

  • 描述: 表示 HTML 或 XML 文档中的元素（标签），如 <div>、<p>、<a> 等。

  • 示例:

    <div id="example">Hello, World!</div>

    const element = document.getElementById("example");
console.log(element.nodeType); // 输出: 1
  1. 属性节点 (Attr)

  • nodeType: 2

  • 描述: 表示元素的属性，如 id、class、href 等。

  • 示例:

    <a href="https://example.com">Link</a>

    const link = document.querySelector("a");
const attr = link.getAttributeNode("href");
console.log(attr.nodeType); // 输出: 2
  1. 文本节点 (Text)

  • nodeType: 3

  • 描述: 表示元素或属性中的文本内容。

  • 示例:

    <p>Hello, World!</p>

    const paragraph = document.querySelector("p");
const textNode = paragraph.childNodes[0]; // 获取文本节点
console.log(textNode.nodeType); // 输出: 3
  1. 注释节点 (Comment)

  • nodeType: 8

  • 描述: 表示 HTML 或 XML 文档中的注释。

  • 示例:

    <!-- This is a comment -->

    const comment = document.body.childNodes[0]; // 假设注释是第一个子节点
console.log(comment.nodeType); // 输出: 8
  1. 文档节点 (Document)
  • nodeType: 9
  • 描述: 表示整个文档（根节点）。
  • 示例: 
    console.log(document.nodeType); // 输出: 9
  1. 文档类型节点 (DocumentType)

  • nodeType: 10

  • 描述: 表示文档类型声明（如 <!DOCTYPE html>）。

  • 示例:

    <!DOCTYPE html>

    const doctype = document.doctype;
console.log(doctype.nodeType); // 输出: 10
  1. 文档片段节点 (DocumentFragment)
  • nodeType: 11
  • 描述: 表示一个轻量级的文档片段，用于高效地操作和插入多个节点。
  • 示例: 
    const fragment = document.createDocumentFragment();
console.log(fragment.nodeType); // 输出: 11
  1. CDATA 节点 (CDATASection)
  • nodeType: 4
  • 描述: 表示 XML 文档中的 CDATA 部分（不解析的文本数据）。
  • 示例: 
    <![CDATA[<message>Hello, World!</message>]]>
  1. 实体引用节点 (EntityReference)
  • nodeType: 5
  • 描述: 表示 XML 文档中的实体引用（如 &amp;）。
  • 注意: 在 HTML 中不常用。
  1. 实体节点 (Entity)
  • nodeType: 6
  • 描述: 表示 XML 文档中的实体定义。
  • 注意: 在 HTML 中不常用。
  1. 处理指令节点 (ProcessingInstruction)
  • nodeType: 7
  • 描述: 表示 XML 文档中的处理指令（如 <?xml-stylesheet ...?>）。
  • 注意: 在 HTML 中不常用。

总结

以下是常见的 DOM 节点类型及其 nodeType 值：

nodeType节点类型描述
1元素节点 (Element)HTML 或 XML 元素
2属性节点 (Attr)元素的属性
3文本节点 (Text)元素或属性中的文本内容
4CDATA 节点 (CDATASection)XML 中的 CDATA 部分
5实体引用节点 (EntityReference)XML 中的实体引用
6实体节点 (Entity)XML 中的实体定义
7处理指令节点 (ProcessingInstruction)XML 处理指令
8注释节点 (Comment)HTML 或 XML 注释
9文档节点 (Document)整个文档
10文档类型节点 (DocumentType)文档类型声明
11文档片段节点 (DocumentFragment)轻量级文档片段

在实际开发中，最常用的是元素节点 (1)、文本节点 (3) 和注释节点 (8)。通过 nodeType 可以快速判断节点的类型，从而进行相应的操作。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝