HTML DOM节点概述

「爱情、让人受尽委屈。」 2024-04-19 09:29 212阅读 0赞

一，概述

DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM 标准被分为 3 个不同的部分：

  1. 核心 DOM - 针对任何结构化文档的标准模型
  2. XML DOM - 针对 XML 文档的标准模型
  3. HTML DOM - 针对 HTML 文档的标准模型

二，DOM节点

  1. 整个文档是一个文档节点
  2. 每个 HTML 元素是元素节点
  3. HTML 元素内的文本是文本节点
  4. 每个 HTML 属性是属性节点
  5. 注释是注释节点

三，节点的名称

nodeName 是只读的

  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

（1）元素节点名称

  1. //1,获得元素节点
  2.     let h1 = document.getElementById('title');
  3.     //2,获得节点的名字
  4.     let nodeName = h1.nodeName;
  5.     console.log(nodeName);

（2）属性节点名称

  1. //1,获得元素节点
  2. var h1 = document.getElementById('title');
  3. //2,获得特性
  4. var oAttr = h1.attributes;
  6. h1.setAttribute('class', 'ccc');
  7. console.log(oAttr);

四，节点的类型

nodeType 属性返回节点的类型

  • 元素：1
  • 属性：2
  • 文本：3
  • 注释：8

  • 文档：9

    //1,获得元素节点
    let h1 = document.getElementById(‘title’);
    //2,获得节点类型
    let nodeType = h1.nodeType;
    console.log(nodeType);

五，文本节点

  1. //1,获得元素节点
  2. var h1 = document.getElementById('title');
  3. console.log(h1.childNodes);
  5. //2,获得节点的值
  6. var nodeValue = h1.childNodes[1].nodeValue;
  7. console.log(nodeValue);

发表评论

表情：
评论列表 （有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读