DOM及其基础操作

DOM：document object model 文档对象模型，提供一些属性和方法以操作页面中的元素

获取DOM元素的方法

• document.getElementById()指定在文档中，基于元素的ID或者这个元素对象
• [context].getElementsByTagName() 在指定上下文（容器）中，通过标签名获取一组元素集合
• [context].getElementsByClassName()在指定上下文中，通过样式类名获取一组元素集合（不兼容IE6~8）
• document.getElementsByName()在整个文档中，通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以一般用来获取表单元素）
• document.head / document.body / document.documentElement获取页面中的HEAD/BODY/HTML三个元素
• [context].querySelector([selector])在指定上下文中，通过选择器获取到指定的元素对象（不兼容IE6-8）
• [context].querySelectorAll([selector])在指定上下文中，通过选择器获取到指定的元素集合

JS中的节点和描述节点之间关系的属性

节点：Node（页面中所有的东西都是节点）
节点集合：NodeList（getElementsByName / querySelectorAll 获取的都是节点集合）

• 元素节点（元素标签）
  • nodeType：1
  • nodeName：大写的标签名
  • nodeValue：null
• 文本节点
  • nodeType：3
  • nodeName：'#text'
  • nodeValue：文本内容
• 注释节点
  • nodeType：8
  • nodeName：'#comment'
  • nodeValue：注释内容
• 文档节点 document
  • nodeType：9
  • nodeName：'#document'
  • nodeValue：null

描述节点之间关系的属性

• childNodes：获取所有的子节点（非IE6-8浏览器会把空格和换行当作文本节点处理）
• children：获取所有的元素子节点（子元素标签），但是IE6-8下会把注释也当作元素节点
• parent：获取父亲节点
• firstChild：获取第一个子节点
• lastChild：获取最后一个子节点
• firstElementChild：获取第一个元素节点（不兼容IE6-8）
• lastElementChild：获取最后一个元素节点（不兼容IE6-8）
• previousSibling：获取上一个哥哥节点
• nextSibling：获取下一个弟弟节点
• previousElementSibling / nextElementSibling：获取哥哥和弟弟元素节点

动态增删改元素

• createElement(element)：创建元素对象
• createTextNode(text)：创建文本对象
• appendChild(element)：把元素添加到容器的末尾
• insertBefore(newElement, targetElement)：把元素添加到指定容器中指定元素的前面
• cloneNode(true/false)：克隆元素或者节点，true为深克隆，false为浅克隆
• removeChild(element)：移除容器中的某个元素
• setAttribute() / getAttribute() / removeAttribute()：设置获取移除元素的自定义属性信息（这种方式是把自定义属性放到元素结构上）

---

JS盒子模型：在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性（基本上都是有关于样式的）

• 通过JS盒子模型获取元素的相关值
  1.clientWidth & clientHeight：获取当前元素可视区域的宽高（内容的宽高+左右/上下PADDING），和内容是否有溢出无关（和是否设置了OVERFLOW:HIDDEN也无关）
  兼容性处理：
  document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
  2.clientTop & clientLeft：获取(上/左)边框的宽度
  3.offsetWidth & offsetHeight：在client的基础上加上border（和内容是否溢出也没有关系）
  4、scrollWidth & scrollHeight：真实内容的宽高（不一定是设定的值，因为可能会存在内容溢出，有内容溢出的情况下，需要把溢出的内容也算上）+ 左/上PADDING，而且是一个大概的值 （没有内容溢出和CLIENT一样），在不同浏览器中，或者是否设置了OVERFLOW:HIDDEN都会对最后的结果产生影响，所以这个值仅仅做参考
  兼容性处理：
  document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight
  5.offsetParent：当前盒子的父级参照物
  6.offsetTop & offsetLeft：获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移)(注意：当前盒子的外边框开始~父级参照物的内边框)
  7.scrollTop & scrollLeft：滚动条卷去的宽度或者高度，在JS盒子模型13个属性中，只有scrollTop/scrollLeft是“可读写”属性，其余都是“只读”属性

• 通过JS盒模型属性获取值的特点
  1.获取的都是数字不带单位
  2.获取的都是整数，不会出现小数（一般都会四舍五入，尤其是获取的偏移量）
  3.获取的结果都是复合样式值（好几个元素的样式组合在一起的值），如果只想获取单一样式值（例如：只想获取PADDING），盒子模型属性就操作不了了

• 获取元素具体的某个样式值
  1.[元素].style.xxx操作获取：只能获取所有写在元素行内上的样式
  2.获取当前元素所有经过浏览器计算的样式
  window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象)（IE9+）
  [元素].currentStyle 获取经过计算的样式（IE6~8）