JavaScript——DOM

今天分享的是JavaScript中的重要组成部分DOM

DOM

在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时，使用它将样式和其他信息应用于正确的元素，而页面呈现完成以后，开发人员可以用JavaScript操作DOM。

文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。

• 元素节点: 一个元素，存在于DOM中。
• 根节点: 树中顶层节点，在HTML的情况下，总是一个HTML节点（其他标记词汇，如SVG和定制XML将有不同的根元素）。
• 子节点: 直接位于另一个节点内的节点。
• 后代节点: 位于另一个节点内任意位置的节点。
• 父节点: 里面有另一个节点的节点。
• 兄弟节点: DOM树中位于同一等级的节点。
• 文本节点: 包含文字串的节点

获取元素引用

• document.getElementById(‘id名’)
  在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)

• context.getElementsByTagName(‘标签名’)
  通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合

• context.getElementsByClassName(’’)
  通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合在IE6~8下不兼容

• context.getElementsByName(’’)
  在整个文档中，通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以我们一般应用于表单元素的处理）

• document.body/document.head/document.documentElement

console.log(document.body)                        //获取body
console.log(document.head)                        //获取head
console.log(document.documentElement)            //获取html

• context.querySelector(‘选择器’)
  在指定上下文中通过选择器获取第一个元素（只能获取一个），获取不到就是null
  在IE6~8下不兼容
• context.querySelectorAll()
  在指定上下文中通过选择器获取一组元素集合，获取不到就是空元素集合在IE6~8下不兼容

操作节点的属性

• childNodes ：获取的所有的子节点
• children ：获取所有的元素子节点（子元素标签集合）（在IE6~8下不兼容）
• firstChild ：获取第一个子节点
• lastChild ：获取最后一个子节点
• firstElementChild ：获取第一个元素子节点（在IE6~8下不兼容）
• lastElementChild ：获取最后一个元素子节点（在IE6~8下不兼容）
• previousSibling ：获取上一个同级节点（获取上一个哥哥节点）
• nextSibling ：获取下一个同级节点（获取下一个弟弟节点）
• previousElementSibling：获取上一个同级元素节点（在IE6~8下不兼容）（获取哥哥元素节点）
• nextElementSibling ：获取上一个同级元素节点（在IE6~8下不兼容）（获取弟弟元素节点）
• parentNode ：获取父节点

java script 的节点修改

• createElement：创建元素节点
• createTextNode：创建文本节点
• 容器.appendChild(节点)：把节点插入到容器的末尾
• 容器.insertBefore(新节点，老节点)：把新节点插入到老节点的前面
• 容器.removerChild(节点)：移除容器中的节点

JS克隆节点

节点.cloneNode(true/false)
克隆节点，如果传参是true就是深克隆，如果不传参或者传false就是浅克隆（只复制外层元素，不复制里边的内容）

Dom的回流和重绘

dom的回流：单页面的dom产生变化（增加，删除，改变位置，改变大小）都会引发dom的回流，所谓回流：就是把dom重新排列进行渲染，他会非常消耗性能
创建一个文档碎片进行优化
模板字符串进行优化
重绘：当某一个dom元素的样式发生改变（比如改变dom的颜色），不会引起dom的回流，但是会重新绘制
以上就是我这次对JavaScript的学习感受，欢迎斧正。