DOM解析

1. DOM解析

* Document  Object  Model
* 文档：标记型文档  （HTML/XML）
* 对象：封装属性和行为（方法）
* 模型：共性特征的体现

2. DOM解析HTML

* 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
    <span id="spanId">文本</span>
    Document:代表整个文档  Eelment:元素（标签）对象  Attribute：属性对象  Node:节点对象

* DOM想要操作标记型文档先解析。（解析器）
    * DOM解析HTML（浏览器就可以HTML）
        <ul>
           <li>北京</li>
           <li>上海</li>
         </ul>
         *创建元素对象<li></li>
         li=document.createElement
         *创建文本对象，北京
         text=document.createTextNode
         *把深圳添加到li的下面，作为李的子节点
         li.appendChild(text);
         *把li添加到ul下面，作为ul的子节点
         ul.appendChild(li)(ul 通过ul的属性去拿他的对象)

* 浏览器DOM解析HTML？

3. DOM的三个级别：

4. DHTML不是一种编程语言。

* html      ：封装数据。  <span>展示给用户的数据</span>
* css       ：设置样式（显示效果）
* dom       ：操作HTML（解析HTML）
* js        ：提供逻辑（判断语句，循环语句）

5. Document：代表整个文档。

* 方法：
    getElementById("id的值");         通过元素的id的属性获取元素（标签）对象。
    getElementsByName("name属性值");       通过名称获取元素对象的集合（返回数组）
    getElementsByTagName("标签名称");   通过标签名称获取元素对象的集合（返回数组）

    * write("文本的内容（html的标签）")       把文本内容写到浏览器上。

    * createElement("元素名称");        创建元素对象
    * createTextNode("文本内容")        创建文本对象

    * appendChild("子节点")                添加子节点

    <span id=""></span>

6. Element对象

* 获取元素对象
    * getAttribute("属性名称"); 获取属性的值
    * setAttribute("属性名称","属性的值");  设置或者修改属性的值
    * removeAttribute("属性名称");      删除属性

* 获取元素下的所有子节点（*****）
    * ul.getElementsByTagName();

7. Node：节点对象

* nodeName      ：节点名称
* nodeType      ：节点类型
* nodeValue     ：节点的值

* parentNode    获取父节点（永远是一个元素节点）

IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点

<ul>
    <li>北京</li>
</ul>   

* 如果通过ul获取北京的子节点，使用是    ul.firstElementChild;   获取北京的子节点（IE9-11 Chrome FireFox）
    * 但是如果IE6-8，需要使用firstChild; 

<span id="spanId">
    文本内容
</span> 

* 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）


* 方法
    * hasChildNodes()       检查是否包含子节点
    * hasAttributes()       检查是否包含属性

    * appendChild(node)         父节点调用，在末尾添加子节点
    * insertBefore(new,old)     父节点调用，在指定节点之前添加子节点
    * replaceChild(new,old)     父节点调用，替换节点
    * removeChild(node)         父节点调用,删除节点

    * cloneNode(boolean)        不是父节点调用,复制节点
        * boolean   ：如果是true，复制子节点
                    ：如果是false，不复制子节点，默认是false

8. innerHTML ：获取和设置文本内容。

* innerHTML属性：
    * 获取文本内容
    * 设置文本内容

* 事件：
    onclick     点击事件
    onload      加载事件
    onfocus     获取焦点事件
    onblur      失去焦点事件

9. 全选/全不选/反选的练习

<input type="checkbox" />
* 指定默认值：checked 只要出现在<input type="checkbox" />,对号就勾上了。

10. 鼠标移动的事件

onmousemove
onmouseout          
onmouseover         

11. 鼠标点击事件（*）

onclick         单击
ondblclick      双击

12. 加载和卸载

* onload（*****）     加载
* onunload      卸载

13. 获取焦点和失去焦点（*）

* onfocus       获取焦点
* onblur        失去焦点

14. 键盘

* onkeyup       按下抬起

15. 改变事件（*）

* onchange

16. 控制表单的提交（*）

onsubmit

17. 列表内容