网站推广营销活动多张图片排版设计欣赏
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：表示完全克隆，包括后代