再谈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中节点类型
| 节点类型 | 描述 | |
| 1 | Element | 代表元素 |
| 2 | Attr | 代表属性 |
| 3 | Text | 代表元素或属性中的文本内容。 |
| 4 | CDATASection | 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 |
| 5 | EntityReference | 代表实体引用。 |
| 6 | Entity | 代表实体。 |
| 7 | ProcessingInstruction | 代表处理指令。 |
| 8 | Comment | 代表注释。 |
| 9 | Document | 代表整个文档（DOM 树的根节点）。 |
| 10 | DocumentType | 向为文档定义的实体提供接口 |
| 11 | DocumentFragment | 代表轻量级的 Document 对象，能够容纳文档的某个部分 |
| 12 | Notation | 代表 DTD 中声明的符号。 |
DOM节点关系
| nodeType | 返回节点类型的数字值（1~12） |
| nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
| nodeValue |
文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
| hasChildNodes | 包含一个或多个节点时返回true |
| contains | 如果是后代节点返回true |
| isEqualNode | 两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回true |
| isSameNode | 指的是两个节点是否是同一类型，具有相等attributes/childNodes等 |
| compareDocumentPostion | 确定节点之间的各种关系 |
| parentNode | 父节点 |
| parentElement | 父节点标签元素 |
| childNodes | 所有子节点 |
| children | 第一层子节点 |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素 |
| childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
| ownerDocument | 指向整个文档的文档节点 |
节点与元素的区别
element是包含在node里的，它的nodeType是1
parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。
当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null
Document文档对象元素查找
BOM核心为window，DOM核心为document(文档对象)
获取Element对象
|
getElementById() |
一个参数:元素标签的ID |
| getElementsByTagName() | 一个参数:元素标签名 |
| getElementsByName() | 一个参数:name属性名 |
| getElementsByClassName() | 一个参数:包含一个或多个类名的字符串 |
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] |
元素对象ELEMENT操作
所有DOM对象都可以被认为是一个节点,除了CURD DOM树(appendChild/removeChild/replaceChild)外，还有其他操作
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() |
插入文本，两个参数：插入的位置和要插入文本
|
节点属性attributes
|
attributes |
获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
| createAttribute | 创建属性 |
参考文章：
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
