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宽高的和