再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解
原创再谈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",在该元素后插入 |
- "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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
