DOM节点:
从文档对象模型DOM角度看:
每个html标签、标签属性、内容、注释...都被看成dom节点
DOM 就是我们 html 结构中一个一个的节点构成的
DOM节点分类
DOM 节点类型
1.整个文档是一个文档节点
2.每个 HTML 元素是元素节点
3.HTML 元素内的文本是文本节点
4.每个 HTML 属性是属性节点
5.注释是注释节点
常用的三大类: 元素节点 / 文本节点 / 属性节点
DOM节点树形结构
画出节点树形图
DOM节点关系
根节点:在HTML文档中,html就是根节点。
父节点:一个节点之上的节点就是该节点的父节点,例如ul的父节点就是body,body的父节点就 是html。
子节点:一个节点之下的节点就是该节点的子节点,例如ul就是body的子节点。
兄弟节点 :如果多个节点在同一层次,并拥有相同的父节点,那么这几个节点就是兄弟节点。 例如所有li是兄弟节点,因为他们拥有相同的父节点ul
获取节点:
获取元素节点
getElement系列
querySelector系列
层次关系获取节点
children :获取某一节点下所有的子一级 元素节点
层次关系获取元素节点
firstElementChild
lastElementChild
获取元素节点的所有属性节点: attributes
层次图 非常规节点获取:
获取html根节点
document.documentElement
获取body节点
document.body
获取head
document.head
节点属性:
打印ul元素节点下所有节点信息? ul.childNodes 获取ul元素节点下所有子节点 => 返回值是伪数组
操作DOM节点:
我们所说的操作无非就是 增删改查(CRUD) 创建一个节点(因为向页面中增加之前,我们需要先创建一个节点出来) 向页面中增加一个节点 删除页面中的某一个节点 修改页面中的某一个节点 获取页面中的某一个节点
创建节点
创建属性节点 createAttribute: 创建属性节点 setAttruibuteNode: 给元素节点设置属性节点
加入节点
appendChild:是向一个元素节点的末尾追加一个节点
insertBefore:向某一个节点前插入一个节点
删除节点
removeChild:移除某一节点下的某一个节点
remove: 移除当前节点 语法:oDiv.remove() 移除oDiv节点
替换节点
replaceChild:将页面中的某一个节点替换掉
复制节点
语法: 节点.cloneNode(true|false) true: 复制节点包含节点下所有子节点 false: 复制当前节点
获取元素的非行间样式:
我们在操作 DOM 的时候,很重要的一点就是要操作元素的 css 样式 那么在操作 css 样式的时候,我们避免不了就要获取元素的样式 之前我们说过可以用 元素.style.xxx 来获取 但是这个方法只能获取到元素 行间样式,也就是写在行内的样式
获取元素的偏移量:
就是元素在页面上的什么位置 我们有几个属性来获取,offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight
offsetLeft 和 offsetTop
offsetWidth 和 offsetHeight
获取元素尺寸(宽、高)三种方式:
offsetWidth = 内容width + padding + border clientWidth = 内容width + padding window.getComputedStyle(divEle).width = 内容width