HTML DOM节点概述

一，概述

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,获得元素节点
    let h1 = document.getElementById('title');
    //2,获得节点的名字
    let nodeName = h1.nodeName;
    console.log(nodeName);

（2）属性节点名称

//1,获得元素节点
var h1 = document.getElementById('title');
//2,获得特性
var oAttr = h1.attributes;

h1.setAttribute('class', 'ccc');
console.log(oAttr);

四，节点的类型

nodeType 属性返回节点的类型

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

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

五，文本节点

//1,获得元素节点
var h1 = document.getElementById('title');
console.log(h1.childNodes);

//2,获得节点的值
var nodeValue = h1.childNodes[1].nodeValue;
console.log(nodeValue);