JS垫脚石-DOM篇1

概述

• 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM被构造为对象的树
• 通过对象模型，js获得了改变页面中所有HTML元素、HTML属性、CSS样式的能力，能够对页面中所有事件作出反应，从而实现对元素的增删改查操作

获取元素

1. 直接查找
   -通过id查找 .getElementById(‘id名’)，为document特有的函数，只能由document调用
   -通过标签名查找 .getElementsByTagName(‘标签名’)
   -通过类名查找 .getElementsByClassName(‘类名’)
2. 关系查找
   父子节点
   -.children()：获取该节点下的所有子元素（非标准属性）
   标准浏览器指ie6、7、8
   -.childNodes()：获取该节点下的所有子元素（标准及ie9以上，会把换行当做空白文本节点解析）
   -.parentNode：获取父节点
   -.firstChild：获取第一个子节点的元素（会把换行当做空白文本节点解析）
   -.firstElementChild：获取第一个子节点的元素（ie8以下没有这个属性）
   -.lastChild
   -.lastElementChild
   兄弟节点
   带Element的ie8以下没有这个属性
   -.nextElementSibling()：获取下一兄弟节点元素
   -.previousElementSibling：获取前一兄弟节点元素
   -.nextSibling()
   -.previousSibling()

节点类型

nodeType属性获取
console.log(a.nodeType);
-元素节点 1
-文本节点 3
-注释节点 8
-属性节点 2（属性结点被存放在一个特殊属性attributes中）
-document节点 9

定位偏移量

• offsetLeft
• offsetTop

元素自身身高

• offsetWidth/offsetHeight
• clientWidth/clientHeight