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

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