JavaScript DOM基础知识（十）

节点属性操作

1. getAttribute(“name”) 获取节点上name属性的值
2. setAttribute(“name”,“value”) 设置节点上name属性的值为value
3. removeAttribute(“name”) 删除节点上的name属性
4. getAttributeNode(“type”) 获取节点上type属性节点

documentFragment文档碎片

文档碎片方法可用在频繁操作dom上进行优化。包括vue的编译模板原理就有用到该方法…

• documentFragment是一个文档碎片，是一种‘轻量级节点’，是一个虚拟的节点对象

• documentFragment的nodeType值为11，nodeName的值为#document-fragment

• 通常作为仓库来使用，不存在DOM树上，将多个需要插入的新节点放在文档碎片上，再插入文档中可以优化DOM操作

• 虚拟的节点对象，包含节点的所有属性和方法

• 创建一个文档碎片(空容器)
  var fragment = document.createDocumentFragment()

• 将新节点插入文档碎片
  fragment.appendChild(newNode)

• 将文档碎片插入box节点中
  box.appendChild(fragment)

offset/client系列属性

后期制作“放大镜”效果用到的就是该系列相关方法！

• offsetParent：返回距离元素最近的定位父级
• offsetLeft：获取对象左侧与定位父级之间的距离(默认是body)
• offsetTop：获取对象上侧与定位父级之间的距离(默认是body)
• offsetWidth：获取元素自身的宽度（包含边框和 padding）
• offsetHeight：获取元素自身的高度（包含边框和 padding）
• clientWidth：获取元素自身的宽度（不含边框）
• clientHeight：获取元素自身的高度（不含边框）
• clientLeft、clientTop：获取元素padding外侧到边框外侧的距离（边框宽度）

窗口、视口、页面相关尺寸

这系列的方法现在还比较迷，有点难以理清…

• document.body.offsetWidth body的宽度（包含边框）

• document.body.offsetHeight body的高度（包含边框）

• document.body.clientWidth body的宽度（不含边框）

• document.body.clientHeight body的高度（不含边框）

• document.documentElement.offsetWidth html文档的宽

• document.documentElement.offsetHeight html文档高度

• document.documentElement.clientWidth 浏览器可视区宽度(不含滚动条位置)

• document.documentElement.clientHeight 浏览器可视区高度(不含滚动条位置)

• window.innerWidth 浏览器可视区宽度(含滚动条位置)

• window.innerHeight 浏览器可视区高度(含滚动条位置)

• document.documentElement.scrollWidth 可滚动区域总宽度(网页正文全文宽度)

• document.documentElement.scrollHeight 可滚动区域总高度(网页正文全文高度)