再谈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()	插入文本，两个参数：插入的位置和要插入文本 "beforebegin",在该元素前插入 "afterbegin",在该元素第一个子元素前插入 "beforeend",在该元素最后一个子元素后面插入 "afterend",在该元素后插入

节点属性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