<span>再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解</span>

DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。

根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

DOM规定文档中的每个成分都是一个节点（Node）,可以说HTML文档是由节点构成的集合，常见DOM节点有：

• 文档节点（Document）：代表整个文档

• 元素节点（Element）：文档中的一个标记

• 文本节点（Text）：标记中的文本

• 属性节点（Attr）：代表一个属性，元素才有属性

DOM节点类型

NodeType属性来表明节点类型，下面列举12中节点类型

DOM节点关系

节点与元素的区别

element是包含在node里的，它的nodeType是1

parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。

当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null

Document文档对象元素查找

BOM核心为window，DOM核心为document(文档对象)

获取Element对象

元素对象ELEMENT操作

所有DOM对象都可以被认为是一个节点,除了CURD DOM树(appendChild/removeChild/replaceChild)外，还有其他操作

节点属性attributes

参考文章：

ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）https://www.cnblogs.com/best/p/8028168.html

JavaScript学习总结（三）BOM和DOM详解 https://segmentfault.com/a/1190000000654274

Javascript操作BOM和DOM详解（1） https://blog.csdn.net/openbox2008/article/details/85260063

JavaWeb学习总结：JavaScript（BOM和DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198

HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp

XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp

JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html

转载本站文章《再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8347.html