再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解
Author：zhoulujun Date：
DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。
根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。
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 | 父节点标签元素，与parentNode的区别在于，其父节点必须是一个Element元素(否则返回null) |
| childNodes | 所有子节点，实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等； |
| children | 第一层子节点，实时的 HTMLCollection，子节点都是Element，IE9以下浏览器不支持； |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点，Node 对象形式 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素，前一个节点必须是Element，注意IE9以下浏览器不支持。 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素，后一个节点必须是Element，注意IE9以下浏览器不支持。 |
| 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，返回一个与之对应id属性的节点对象 | 选中唯元素 |
| getElementsByTagName() | 一个参数:元素标签名，回一个对象数组（准确的说是HTMLCollection集合） | 选中所有img图片 |
| getElementsByName() | 一个参数:name属性名，匹配元素name=参数值的元素，作为 NodeList 对象。 | 选中iframe |
| getElementsByClassName() | 一个参数:包含一个或多个类名的字符串，返回文档中所有指定类名的元素集合(NodeList) | 对某个类 |
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null | 对某个样式选择 |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] | 对某钟样式选择 |
结点选择器性能对比：https://www.measurethat.net/Benchmarks/ShowResult/209258
注意事项：
由于querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字.
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
在使用的时候getElement这种方法性能比较好，query选择符则比较方便．
元素对象ELEMENT操作
所有DOM对象都可以被认为是一个节点，除了DOM树增删改场景的函数 createElement、removeChild、appendChild|replaceChild外，还有其他操作。
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() | 插入文本，两个参数：插入的位置和要插入文本
|
注：DOM操作性能很差，其最主要的原因设计到浏览器的重排与重绘，为此，我们一般采用innerHTML 去修改批量修改DOM内容。不过现在react/Vue等框架基本都会采用虚拟DOM的形势去更新DOM(具体看参看：《再谈前端HTML模板技术》)。
节点属性attributes
attributes | 获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
| createAttribute | 创建属性 |
| dataset | 获取html data-开头的属性，<div id="user" data-id="user">，el.id === dataset.id |
参考文章：
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