DOM下

DOM节点

DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点

什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）

比如我们标签里面写的文字，那么就是文本节点

写在每一个标签上的属性，就是属性节点

元素节点

我们通过getElementBy...获取到的都是元素节点

属性节点

我们通过getAttribute获取的就是元素的属性节点

文本节点

我们通过innerText获取到的就是元素的文本节点

获取节点

childNodes：获取某一个节点下所有的子一级节点

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

lastChild：获取某一节点下子一级的最后一个节点

firstElementChild：获取某一节点下子一级第一个元素节点

lastElementChild：获取某一节点下子一级最后一个元素节点

nextSibling：获取某一个节点的下一个兄弟节点

previousSibling：获取某一个节点的上一个兄弟节点

nextElementSibling：获取某一个节点的下一个元素节点

previousElementSibling：获取某一个节点的上一个元素节点

parentNode：获取某一个节点的父节点

attributes：获取某一个元素节点的所有属性节点

节点属性

nodeType

nodeType：获取节点的节点类型，用数字表示

nodeName

nodeName：获取节点的节点名称

nodeValue

nodeValue：获取节点的值

-nodeTypenodeNamenodeValue

元素节点1大写标签名null

属性节点2属性名属性值

文本节点3#text文本内容

操作DOM 节点

我们所说的操作无非就是增删改查（CRUD）

创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）

向页面中增加一个节点

删除页面中的某一个节点

修改页面中的某一个节点

获取页面中的某一个节点

创建一个节点

createElement：用于创建一个元素节点

createTextNode：用于创建一个文本节点

向页面中加入一个节点

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

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

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

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

删除页面中的某一个节点

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

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

修改页面中的某一个节点

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

语法：父节点.replace(新节点，旧节点)

获取元素的非行间样式

getComputedStyle（非IE使用）

语法：window.getComputedStyle(元素, null).要获取的属性

currentStyle（IE使用）

语法：元素.currentStyle.要获取的属性

获取元素的偏移量

offsetLeft 和 offsetTop

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

分成两个情况来看

没有定位的情况下：

获取元素边框外侧到页面内侧的距离

有定位的情况下：

获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的left 和 top 值）

offsetWidth 和 offsetHeight

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