DOM(下)文档对象模型-CSDN博客

本文链接：https://blog.csdn.net/m0_60505343/article/details/119394741

DOM节点

从文档对象模型DOM角度看:

每个html标签、标签属性、内容、注释...都被看成dom节点
DOM 就是我们 html 结构中一个一个的节点构成的

DOM节点分类：

DOM 节点类型：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

常用的三大类: 元素节点 / 文本节点 / 属性节点

DOM节点关系：

根节点：在HTML文档中，html就是根节点

父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就是html

子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点

兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。例如所有li是兄弟节点，因为他们拥有相同的父节点ul

获取节点

获取元素节点：

getElement系列和querySelector系列

层次关系获取节点：

parentNode:返回节点的子节点

childNodes:返回子节点的集合，childNodes[i]

firstChild:返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild:返回节点的最后一个子节点

nextSibling:下一个节点

previousSibling:上一个节点

children ：获取某一节点下所有的子一级元素节点

层次关系获取元素节点：

firstElementChild:返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastElementChild:返回节点的最后一个子节点

nextElementSibling:下一个节点

previousElementSibling:上一个节点

firstElementChild：获取节点下面的第一个元素节点

lastElementChild：获取节点下面的最后一个元素节点

获取元素节点的所有属性节点: attributes

非常规节点获取：

获取html根节点：document.documentElement

获取body节点：document.body

获取head：document.head

节点属性：

---	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

操作DOM节点

创建节点：

创建一个元素节点：createElement

创建一个文本节点：createTextNode

创建属性节点:

createAttribute: 创建属性节点

setAttruibuteNode: 给元素节点设置属性节点

加入节点:

appendChild：是向一个元素节点的末尾追加一个节点

语法：

父节点.appendChild(要插入的子节点)

insertBefore：向某一个节点前插入一个节点

语法：

父节点.insertBefore(要插入的节点，要插入在哪一个节点前面)

删除节点：

removeChild：移除某一节点下的某一个节点

语法：

父节点.removeChild(要移除的字节点)

remove: 移除当前节点语法：

父元素.remove( 移除的节点)

替换节点：

replaceChild：将页面中的某一个节点替换掉

语法：

父节点.replaceChild(新节点，旧节点)

复制节点：

语法：

节点.cloneNode(true|false)

true: 复制节点包含节点下所有子节点 false: 复制当前节点

获取元素的非行间样式

getComputedStyle（非IE使用）

语法：

window.getComputedStyle(元素，null).要获取的属性

currentStyle（IE使用）

语法：

元素.currentStyle.要获取的属性

获取元素的偏移量

offsetLeft 和 offsetTop：获取的是元左边的偏移量和上边的偏移量

分成两个情况来看
没有定位的情况下：

获取元素边框外侧到页面内侧的距离
有定位的情况下：获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的left和top 值)

offsetWidth 和 offsetHeight：获取元素 内容宽高+padding宽高+border宽高 的和

获取元素尺寸（宽、高）三种方式

offsetWidth = 内容width + padding + borderclientWidth = 内容width + paddingwindow.getComputedStyle(divEle).width = 内容width