1.获取元素的偏移量
offsetLeft和offsetTop
分别获取的是元素元素左边的偏移量和上边的偏移量
语法:元素对象.offsetLeft /元素对象.offsetTop
返回值:就是该元素对应的偏移量,是一个具体的数字
offsetLeft:该元素相对于参考父级的左侧偏移量
offsetTop:钙元素相对于参考父级的上侧偏移量
clientLeft和clientTop
其值相当于左边框和上边框的宽度
2.获取元素的尺寸
offsetWidth和offsetHeight
语法:元素对象.offsetWidth/元素对象.offsetHeight
offsetWidth:获取的是元素内容+padding+border的宽度
offsetHeight:获取的是元素内容+padding+border的高度
不管盒子模型是什么状态(也就是是不是怪异盒模型),都是内容+padding+border
当元素为display:none;的时候,是拿不到尺寸的
clientWidth和clientHeight
语法:元素对象.clientWidth/元素对象.clientHeight
返回值:该元素的宽度和高度
clientWidth:获取的是元素内容+padding的宽度
clientHeight:获取的是元素内容+padding的高度
不管盒子模型是什么状态,其都是内容+padding
注意:获取到的尺寸是没有单位的数字
当元素在页面中不占位置的时候,获取到的是0
3.获取窗口的尺寸(DOM级别)
document.documentElement.clientWidth:可视窗口的宽度,不包含滚动条
document.documentElement.clientHeight:可视窗口的高度,不包含滚动条的尺寸
4.获取节点的方式有哪些
childNodes
作用:获取某一节点下所有的子一级节点(也就是说子集节点里面嵌套的节点获取不到其标签,但是可以获取到内容,与父节点一起展示)
语法:父节点.childNodes
返回值:是一个伪数组,里面是所有的子节点
children
作用:获取某一节点下所有子一级节点(与上面一样,获取不到一级节点里面的嵌套节点)
语法:父节点.children
返回值:所有的子元素节点,是一个伪数组
firstChild
作用:获取某一个节点下一级的第一个节点
语法:父节点.firstChild
返回值:不再是伪数组了,只是获取到一个节点
lastChild
作用:获取某一节点下一级的最后一个节点
语法:父节点.lastChild
返回值:就是最后一个子节点
firstElementChild
作用:获取某一节点下一级第一个元素节点
语法:元素对象.firstElementChild
返回值:第一个子元素节点,不是伪数组
lastElementChild
作用:获取某一节点下一级最后一个元素节点
语法:原始对象.lastElementChild
返回值:最后一个子元素节点,不是伪数组
nextSibling
作用:获取某一个节点的下一个兄弟节点
语法:元素对象.nextSibling
返回值:也是一个节点(下一个兄弟节点),注意节点和元素节点的区别,这里还是节点,包括空白字符形成的文本节点
previousSibling
作用:previousSibling:获取某一个节点的上一个兄弟节点
语法:元素对象.previousSibling
返回值:上一个兄弟节点
nextElementSibling
作用:获取某一个节点的下一个元素节点
语法:元素对象.nextElementSibling
返回值:下一个兄弟元素节点
previousElementSibling
作用:获取某一个节点的上一个元素节点
语法:元素对象.previousElementSibling
返回值:上一个兄弟元素节点
parentNode
作用:获取某一个节点的父节点
语法:原始对象.parentNode
返回值:父节点,这里必是一个元素节点,因为文本节点或其他节点不可能当父节点,就和父元素节点有一点不同,当多次调用父节点的时候,顶级父节点是document,而父元素节点的顶级节点是document,而父元素节点的顶级节点的顶级元素节点是HTML
parentElement
作用:parentElement获取某一节点的父元素节点
语法:原始对象.parentElement
返回值:父元素节点
attributes
作用:attributes:获取某一个元素节点的所有属性节点
返回值:是一个伪数组,存放该元素的所有属性节点
5.节点的操作
创建节点:createElement(创建原始节点)
document.createElement('要创建的节点')
createTextNode:用于创建一个文本节点
语法:document.createTextNode('要写的文本内容')
返回值:就是一个文本节点,不是字符串
增加一个节点
父节点.appendChild(要插入的节点)
父节点.insertBefore(要插入的节点,要插入那个节点前面)
删除一个节点
父节点.removeChild(要移除的节点)
元素节点.remove()
修改一个节点
父节点.replaceChild(新节点,旧节点)
克隆一个节点
节点对象.cloneNode(参数)
参数是一个布尔值true或false,不写就是默认的参数false
false:表示只克隆标签,不克隆后代
true:表示完全克隆,包括后代