DOM（二）

Document Object Model文档对象模型

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

通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
文本
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的属性去拿他的对象
 

1.Document：代表整个文档。

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

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

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

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

    <span id=""></span>

2.Element对象

• 获取元素对象

  • getAttribute(“属性名称”); 获取属性的值
  • setAttribute(“属性名称”,“属性的值”); 设置或者修改属性的值
  • removeAttribute(“属性名称”); 删除属性

• 获取元素下的所有子节点（）

  • ul.getElementsByTagName();

3. Node：节点对象

• nodeName ：节点名称

• nodeType ：节点类型

• nodeValue ：节点的值

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

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

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

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