2019-03-06 DOM对象

DOM对象概述

DOM（Document Object Model）对象即文档对象模型，是html和xml的编程接口，

DOM对象由核心 DOM,HTML DOM,XML DOM三部分组成, 其中我们主要接触的是

HTML DOM, HTML DOM定义了访问和操作html文档的标准编程接口和方法。

DOM 以树结构表达 HTML 文档，如下图：

image

HTML DOM 节点

在html中一切内容都是节点

• 整个文档是文档节点

• 每个HTML元素是元素节点

• HTML元素内的文本是文本节点

• 属性有属性节点

• 注释有注释节点

这些节点共同组成了节点树：

image

节点之间的关系

DOM节点之间的关系和我们人类也很相似，毕竟是我们人类发明规范的，也有父子，兄弟的关系。

如图：

image

从图中可以看出：

• 在DOM树中有一个根节点，也就是html节点

• html有多个子（child）节点，每个子节点又有自己的父(parent)节点和子节点

• 在同一个父节点下的节点互为兄弟(sibling)节点

HTML DOM 方法

1. 获取元素的方法

   • 通过ID获取元素 getElementById();

   var id = document.getElementById('id名');

   • 通过元素名称获取元素，获取的是该元素的元素列表

   var lis = document.getElementsByTagName('元素名称')；

   • 通过类名称获取元素，获取的是名称为该类名的元素列表（有兼容问题，ie8即以下不支持）

   var lis = document.getElementsByClassName('元素名称')；

   • html5新增元素选择器querySelector（）和 querySelectorAll();（有兼容问题，ie8即以下不支持）

     var id = document.querySelector('#id'); //获取id元素，id名称前需加#

     var calssName = document.querySelector('.calssName'); //获取类元素，类名前需加.

     querySelector()和 querySelectorAll()的区别

     • querySelector() 获取的是单个元素，querySelectorAll()获取的是元素列表（多个元素）

     • 用法相同

     var calssNames = document.querySelectorAll('.calssName'); //获取类元素，类名前需加.

2. 操作元素的方法

   • 属性方法innerHTML和innerText

     • innerHTML获取HTML内容(包括html标签)

     • innerText 获取文本内容（不包括html标签）

     如下例所示：

     
     hello word
     
     

     
     var p = docuement.querySelector('p');
     
     console.log(p.innerHTML); // 
     hello word
     
     console.log(p.innerText);  //hello word
     
     

   也可以用innerHTML和innerText来修改内容

    > p.innerHTML = "新文本!";
   
    * 节点之间关系的访问与操作
   
        * parentNode  获取某元素的父节点
   
        * childNodes 获取某元素的子节点
   
        * children获取某元素的子节点
   
        * firstChild 获取某元素的第一个子节点
   
        * lastChild 获取某元素的最后一个子节点
   
        * previousSibling 获取某元素的上一个兄弟节点
   
        * nextSibling 获取某元素的下一个兄弟节点
   
    例子：
   
    ```html
   
    
   
   
          
   第一个节点
   
          
   第一个节点
   
          
   第一个节点
   
    
   
    ```
   
    ```javaScript
   
      var ul = document.querySelector('ul');
   
      var childs = ul.childNodes;  //获取该元素的子节点
   
      var firstChild = ul.firstChild ;
   
      var lastChild = ul.lastChild ;
   
      var child = document.querySelector('child');
   
      var parent = child.parentNode;
   
      var lastNode = child.nextSibling;
   
      var prevNode = child.previousSibling;
   
    ```
   

   • 操作节点增，删，改

     1. 创建元素节点createElement和createTextNode(创建文本节点)

     2. 添加子节点appendChild()和insertBefore()在指定的子节点前面插入新的子节点

     3. 删除子节点 removeChild()

     4. 替换子节点 replaceChild()

     实例：

     
     这是一个段落。
     
     
             
     这是另一个段落。
     
     
     
     

     
         var para=document.createElement("p");
     
         var node=document.createTextNode("这是一个新段落。");
     
         para.appendChild(node);
     
         var element=document.getElementById("div1");
     
         element.appendChild(para);
     
         var child=document.getElementById("p1");
     
         element.replaceChild(para,child);
     
         element.removeChild(child);
     
     

     常用方法总结：

     方法 | 描述

     ------------ | ------------

     getElementById() | 返回带有指定 ID 的元素。

     getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）

     getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表（集合/节点数组）

     querySelector() | 返回选定的某个元素

     querySelectorAll() | 返回选定的某个名称的所有元素的节点列表（集合/节点数组）

     createElement() | 创建元素节点

     createTextNode() | 创建文本节点

     appendChild() | 把新的子节点添加到指定节点

     insertBefore() | 在指定的子节点前面插入新的子节点

     removeChild() | 删除子节点

     replaceChild() | 替换子节点

     节点类型：

     节点 | 对应的nodeType属性值 | 对应的常量

     --------- | --------- | ------

     文档节点（document）| 9 | Node.DOCUMENT_NODE

     元素节点（element）| 1 | Node.ELEMENT_NODE

     属性节点（attr）| 2 | Node.ATTRIBUTE_NODE

     文本节点（text）| 3 | Node.TEXT_NODE

     文档片断节点（DocumentFragment）| 11 | Node.DOCUMENT_FRAGMENT_NODE

     文档类型节点（DocumentType）| 10 | Node.DOCUMENT_TYPE_NODE

     注释节点（Comment）| 8 | Node.COMMENT_NODE

     节点关系：

     节点属性 | 描述

     ----------------- | ---------------

     parentNode | 获取某元素的父节点

     childNodes | 获取某元素的子节点列表

     children() | 获取某元素的子节点列表

     firstChild | 获取某元素的第一个子节点

     lastChild | 获取某元素的最后一个子节点

     previousSibling | 获取某元素的上一个兄弟节点

     nextSibling | 获取某元素的下一个兄弟节点

参考和扩展阅读

w3cschool DOM

JavaScript 教程(阮一峰)DOM