DOM

正课:
1. 什么是DOM
2. ***DOM树
3. 查找元素


1. 什么是DOM: Document Object Model
      专门操作网页内容的API
      W3C DOM标准 浏览器厂商实现DOM标准
  DHTML: 一切实现网页动态效果的技术的统称
    HTML+CSS+JavaScript
  鄙视题： HTML XHTML DHTML XML
    HTML: 专门编写网页内容的语言
    XHTML: 严格的HTML标准
    DHTML: 所有实现网页动态效果的技术的统称
    XML: 可扩展的标记语言——可自定义标签名的标记语言
    <student>
<name>范冰冰</name>
<math>89</math>
<chs>65</chs>
<eng>95</eng>
    </student>
    被json代替: JavaScript Object Notation
"{'name':"范冰冰",'math':89,'chs':65,'eng':95}"


 DHTML模型: 
   BOM: Browser Object Model
专门操作浏览器窗口的API
没有标准，所以，用的很少
   DOM: Document Object Model
专门操作网页内容的API
W3C DOM标准 浏览器厂商几乎100%实现DOM标准


 DOM: 本来是可以操作一切结构化文档: HTML和XML
    核心DOM: 可操作一切结构化文档的API
万能！ 但API繁琐！
增 删 改 查
    HTML DOM: 专门操作网页内容的API
   其实是基于核心DOM的简化版本。
API简洁！ 仅对复杂HTML元素提供了简化——不是万能
改  复杂元素:增加和删除
    实际开发: 优先使用HTML DOM，
      HTML DOM实现不了的，用核心DOM补充


2. ***DOM Tree: 保存所有网页内容的树形结构
   网页中每个内容(元素，文本，属性...)都是树上的节点
  网页加载过程: 
  html代码-DOM Tree
 |
 Rander Tree-计算布局和位置-paint
 |              (layout)
  css代码-cssRules
  DOM Tree的加载过程: 
    1. 在开始加载网页内容前，先创建document节点
document节点是整棵DOM树的树根
查找,创建
    2. 顺序读取网页内容，在document节点下，追加子节点
  
  每个节点都是一个对象: Node
    三大属性: 
      nodeType: 描述节点的类型，一个数值
DOCUMENT_NODE: 9
ELEMENT_NODE: 1
ATTRIBUTE_NODE: 2
TEXT_NODE: 3
何时使用: 判断节点类型
      nodeName: 描述节点的名称
document节点: #document
*元素节点: 标签名 ——全大写！
属性节点: 属性名
*文本节点: #text
何时使用: 判断节点的名称时
      nodeValue：描述节点的内容
document节点: null
元素节点: null
*文本节点: 文本内容
*属性节点: 属性值
   课堂练习: 
     元素节点: span->HTMLSpanElement
   ->HTMLElement
   ->Element
   ->Node
     属性节点: id->Attr->Node


  节点间关系: 
    1. 父子: 
parentNode childNodes firstChild lastChild
    2. 兄弟: previousSibling nextSibling
   强调: 除parentNode外，其余都会受到空字符的干扰


****遍历节点树: 对每个子节点执行相同的操作
   递归: 函数内，又调用了自己
     何时使用: 遍历不确定层级深度的树形结构时 
   如何实现递归:
     1. 先实现遍历直接子节点的方法：
      强调: childNodes是动态集合
动态集合: 不保存完整的节点属性，只保存节点的位置
只要访问动态集合，都会导致重新查找DOM树
 优: 快速返回查找结果
 缺: 每次访问动态集合，都重新查找——效率低
遍历时: 都要先将length属性存在变量中
     2. 对每个子节点，再执行和父节点相同的操作！


   算法: 深度优先！优先遍历当前节点的子节点
 子节点遍历完，才跳到兄弟节点


   递归 vs 循环
   1. 递归: 优：直观，易用
    缺：占用更多资源，效率低
   2. 循环: 优: 几乎不占资源，效率高！
    缺: 难度高，代码量大


   递归中获得当前函数本身: arguments.callee