DOM

1.回顾：

• 获取
  document.getElementById
  document.getElementsByTagName
  document.getElementsByClassName
  document.querySelector
  document.querySelectorAll
  document.body
  document.head
  document.all
  document.documentElement
• offset
  offsetLeft
  offsetTop
  offsetWidth
  offsetHeight
  offsetParent
• scroll
  scrollTop
  scrollLeft
  scrollWidth
  scrollHeight
• client
  clientLeft
  clientTop
  clientWidth
  clientHeight

2.JS 的组成 DOM BOM ECMAScript

3.DOM document object model 文档对象模型

可以使JS具有操作页面元素的能力 DOM的顶层对象是document，JS顶层对象是Object，BOM的顶层对象是window 。

4. 兼容性

高级浏览器FF/Chrome 99%
苹果 80%
IE（678） 60%

5.DOM节点

• 节点是一个宽泛的概念，里面不只是只有HTML元素，元素只是其中的一部分。
• text ：文本节点
  HTML标签 元素节点

6.节点的类型 不同类型的节点nodeType的值不一样。比如元素节点的nodeType是1，文本节点的nodeType是3。

http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

• childNodes:获取所有的子节点
• children :获取所有的子元素。
• parentNode:获取父节点。
• offsetParent:获取定位父级。

7.获取首尾节点

• firstChild：IE678获取的是第一个元素节点，高级浏览器获取的是第一个节点（可能是文本节点）。
• lastChild :IE678获取的是最后一个元素节点，高级浏览器获取的是最后一个节点（可能是文本节点）。
• firstElementChild：IE678不支持，高级浏览器获取的是第一个元素节点。
• lastElementChild :IE678不支持，高级浏览器获取的是最后一个元素节点。
• 兼容的写法：

function getFirstChild(obj){
    return  obj.firstElementChild?obj.firstElementChild:obj.firstChild;
}

• nextSibling：IE678获取的是下一个兄弟元素节点，高级浏览器获取的是下一个节点（可能是文本节点）。
• nextElementSibling：IE678不支持，高级浏览器获取的是下一个兄弟元素节点。
• previousSibling：IE678获取的是上一个兄弟元素节点，高级浏览器获取的是上一个节点（可能是文本节点）。
• previousElementSibling：IE678不支持，高级浏览器获取的是上一个兄弟元素节点。

8.元素属性的DOM操作方式

• 获取：getAttribute(名称)
• 设置：setAttribute(名称, 值)
• 删除：removeAttribute(名称)

9.元素操作

• createElement 创建一个标签
• appendChild 在某一个标签的最后添加子元素
• insertBefore（新节点，标识节点）。在标识节点之前插入一个节点
• 扩展：一般页面dom操作添加的元素的操作步骤？
  • 创建
  • 添加属性
  • 插入
• removeChild 删除一个子节点。
• replaceChild（新节点，旧节点） 替换子节点
• 节点克隆
  node.cloneNode(bool);
  true: 复制节点中的内容,包括子节点
  false：只是赋值节点本身。

10.js运行时间检查

• document.createDocumentFragment() 创建文档碎片。方便DOM操作
• console.time();
  console.timeEnd();
  参数是这个时间计时的名称。

11.表格操作

• tHead 获取表格的thead分组
• tFoot 获取表格的tfoot分组
• tBodies 获取表格的tbody分组(结果是数组)
• rows 获取分组里面所有的行（tr）
• cells 获取某行的所有td

12.表单操作

• 获取表单
  form.name
• 获取控件的值
  form.elements
• 表单事件
  change：当用户改变input输入框内容时执行一段Javascript代码（在元素失去焦点时触发）
  focus：获取焦点（input）
  blur：失去焦点（input）
  input：当用户向 <input> 中尝试输入时执行 JavaScript代码（在元素值发生变化是立即触发）
  submit：表单提交