第三周晨考自测（3.0）

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：表示完全克隆，包括后代