DOM扩展：DOM API的进一步增强[总结篇-上]

74 阅读 0 评论 49 点赞

我是靠谱客的博主娇气汉堡，最近开发中收集的这篇文章主要介绍DOM扩展：DOM API的进一步增强[总结篇-上]，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

DOM1级主要定义了文档的底层结构，并提供了基本的查询操作的API，总体而言这些API已经比较完善，我们可以通过这些API完成大部分的DOM操作。然而，为了扩展DOM API的功能，同时进一步提高DOM操作的效率，DOM扩展也不断被提出和采纳。对DOM的扩展主要有两部分：Selectors API和HTML5，另外还有一个Element Traversal规范，主要用于元素遍历，另外还有一些专有扩展。

1 Selectors API

Selectors API主要实现根据CSS选择符来查询匹配的文档元素，事实上这个功能是很多JavaScript库(如jquery)都提供的功能。sectors API level 1的核心是两个函数： querySelector() 和 querySelectorAll() ，这两个方法都接收一个参数，即CSS选择器，前者只返回与选择器匹配的第一个元素，后者则是返回匹配的所有元素的NodeList。这两个函数在使用时需要注意：

(1) 如果传入的选择器是浏览器不支持的或者存在语法错误时，这两个方法都会报错。

(2)可以调用这个方法的节点类型包括Document,Element和DocumentFragment。

Selectors API的浏览器支持情况如下：IE8只能支持CSS2.1中的选择器格式，对于 :nth-child() 等CSS3中的选择器是不支持的。

Selectors API LEVEL2增加了一个方法为matchesSelector，用来检查调用元素是否符合传入的css选择器。截止到2011年还没有浏览器真正实现了 matchesSelector方法，楼主测试了最新版的chrome和firefox，同样也没有实现这个方法，但是各个浏览器都有实验性的方法，比如IE实现了msMatchesSelector，firefox实现了mozMatchesSelector，safari和chrome实现了webkitMatchesSelector方法，如果需要使用该方法，则需要进行必要的能力检测。

2 Element Traversal API

我们曾介绍过，IE9及以上的浏览器会把元素间的空白或换行也作为parentNode的childNodes属性中的一个item，从而为我们遍历元素造成一定障碍，Element Traversal API为元素增加了以下几个属性：

[1]firstChildElement：第一个孩子元素

[2]lastChildElement：最后一个孩子元素

[3]previousElementSibling：上一个相邻的元素

[4]nextElementSibing：下一个相邻的元素

[5]childElementCount：元素子节点的数目

使用这几个API就不需要考虑文本节点和注释节点所带来的影响了，这样我们遍历一个Element的代码就可以由原来的：

function traversal(element){
var childNodes = element.childNodes,i = 0, len = childNodes.length, item;
for(; i < len ; i++){
item = childNodes.item([i]);
if(item.nodeType === 1){
console.log(item.nodeName + ":" + item.innerHTML);
        }
    }
}

演变为：

function traversalNewVersion(element){
var len = element.childElementCount, child = element.firstElementChild;
while(true){
console.log(child.nodeName + ":" + child.innerHTML);
if(child === element.lastElementChild){
break;
        }
child = child.nextElementSibling;
    }
}
注：IE9+,Firefox3.5+,chrome,Opera10+,Safari4+支持Element Traversal API


  
  
   
   3 
   
   
    
    
    
    HTML5对DOM节点的扩展
   
   
  
  
  
  
   
   

  
  
  
  
   
   HTML5对DOM节点的操作也增加了一些API，这一节主要介绍HTML5对DOM节点的扩展。
  
  
  
  
   
   

  
  
  
  
   
   3.1 与类有关的扩展
  
  
  
  
   
   

  
  
  
  
   
   随着WEB开发的不断发展，出现了一个现象：class运用得越来越多，一方面通过class为元素设置css样式，另一方面class还能代表一定的语义性质，为此，HTML5为DOM的class特性操作确定了相应的扩展，主要包括：
  
  
  
  
   
   3.1.1 getElementsByClassName
  
  
  
  
   
   
   
   
    
    getElementsByClassName可以根据class特性选择元素，返回的是一个NodeList，它接收一个参数，即class特性字符串，class的先后顺序不会影响元素的查找。比如我们的DOM中有如下两个元素：
   
   
   
   
    
    <p class="red strong">我是第一个段落</p>
<p class="green strong bigger">我是较大的段落</p>那么我们调用：
   
   
   
   
    
    var paragraphs = document.getElementsByClassName("strong red");仍然可以查找到第一个段落元素，
    
    
    
    
     
     
     
     
      
      
      
      
       
       
       
       
         getElementsByClassName的浏览器支持情况如下： 
       
      
      
     
     
    
    
   
   
   
   
    
    
    
    

   
   
   
   
    
    
    
    
     
     
      
      
      
      
       
       
        
        
         
         
          
          
           
           3.1.2 classList属性
          
          
          
          
           
           
           
           
            
            HTML中，一个元素可能会有多个class特性，每一个class特性之间用空格分隔，这样如果想要对class特性进行修改或者增加class特性的话，必须对字符串进行处理。大部分JavaScript类库都实现了操作class特性相关的方法，而HTML中为元素增加了一个classList属性，从而可以方便地实现对class特性的操作，这个属性是新集合类型DOMTokenList的实例，它也有一个length属性，同时还定义了如下方法：
           
           
           
           
            
            (1)add(value)：为元素增加一个class类
           
           
           
           
            
            (2)contains(value)：判断元素是否包含一个class
           
           
           
           
            
            (3)remove(value)：删除一个class
           
           
           
           
            
            (4)toggle(value)：如果包含这个类，则删除；如果不包含，则增加。
           
           
           
           
            
            有了这些方法，我们操作class列表时就非常方便了，classList的浏览器支持情况如下图：
           
           
           
           
            
            

           
           
          
          
         
         

        
        
      
      
     
     
    
    
     
     
      
      
       
       
        
        
         
         3.2 焦点管理
        
        
      
      
     
     
    
    
     
     
      
      
      
      
       
       
       
       
        
        
         
         
         
         
          
          
          
          
           
           
           
           
            
            
             
             
             
             
              
              
              
              
               
               
                
                
                
                
                 
                 
                  
                  
                  
                  
                   
                   HTML5中也新增了管理DOM焦点的功能，主要是document的两个属性：
                  
                  
                  
                  
                   
                   (1)
                   
                   
                    
                    
                    
                    
                     
                     
                     
                     
                      
                      
                       
                       
                       
                       
                        
                        
                        
                        
                         
                         
                          
                          
                          
                          
                           
                           
                           
                           
                            
                            
                            
                            
                             
                             
                              
                              
                              
                              
                               
                               
                               
                               
                                
                                
                                 
                                 
                                 
                                 
                                  
                                  
                                   
                                   
                                   
                                   
                                    
                                    
                                    
                                    
                                     
                                     
                                     
                                     
                                      
                                      
                                      
                                      
                                       
                                       
                                        
                                        
                                        
                                        
                                         
                                         
                                          
                                          
                                           
                                           
                                            
                                            
                                             
                                             
                                              
                                              
                                               
                                               
                                                
                                                
                                                 
                                                 
                                                  
                                                  
                                                   
                                                   
                                                    
                                                     
                                                    
                                                    
                                                    
                                                    
                                                     
                                                     document.activeElement：
                                                    
                                                    
                                                   
                                                   
                                                 
                                                 
                                               
                                               
                                              
                                              
                                            
                                            
                                           
                                           
                                          
                                          
                                        
                                        
                                       
                                       
                                     
                                     
                                    
                                    
                                   
                                   
                                  
                                  
                                
                                
                              
                              
                             
                             
                           
                           
                          
                          
                         
                         
                       
                       
                      
                      
                    
                    
                   
                   这个引用始终指向当前页面取得焦点的元素，页面加载完毕时，它指向document.body。
                  
                  
                  
                  
                   
                   (2)document.hasFocus：用于获取当前文档是否获得了焦点，从而判断页面是不是正在与用户进行交互。
                  
                  
                  
                  
                   
                   这两个属性最大的功能是提高web应用的无障碍性。
                  
                  
                  
                  
                   
                   
                   
                   注：IE4+,Firefox3+,chrome,Opera8+,Safari4+支持这两个属性
                   
                   

                   
                   3.3 HTMLDocument的变化
                   
                   
                    
                    
                     
                     
                     
                     
                      
                      
                      
                      
                       
                       
                        
                        
                        
                        
                         
                         
                          
                          
                          
                          
                           
                           
                           
                           
                            
                            
                            
                            
                             
                             
                              
                              
                              
                              
                               
                               
                               
                               
                                
                                
                                 
                                 
                                 
                                 
                                  
                                  
                                   
                                   
                                   
                                   
                                    
                                    HTML5对HTMLDocument也做了扩展，增加了新的属性和功能，这些 变化也是基于大部分浏览器已经完全支持的专有扩展而来，因此虽然这些变化写入标准的时间不长，但是有些浏览器可能很早就已经支持相应的功能了。
                                   
                                   
                                   
                                   
                                    
                                    

                                   
                                   
                                   
                                   
                                    
                                    3.3.1 readyState
                                   
                                   
                                   
                                   
                                    
                                    IE4首先为document设置了readyState属性，其他浏览器也陆续增加了这个属性，HTML最终将这个属性写入了标准。在IE中，document的readyState属性包括两个值：
                                   
                                   
                                   
                                   
                                    
                                    [1]loading：正在载入文档
                                   
                                   
                                   
                                   
                                    
                                    [2]complete：文档加载结束
                                   
                                   
                                   
                                   
                                    
                                    我们看下标准中对readyState的阐述：
                                   
                                   
                                   
                                   
                                    
                                    

                                   
                                   
                                   
                                   
                                    
                                    在firefox、chrome等浏览器中，loading和complete之间还有一个
                                    
                                    interactive
                                    
                                    状态，我们看一下MDN中对interactive状态的阐述：
                                   
                                   
                                   
                                   
                                    
                                    

                                   
                                   
                                   
                                   
                                    
                                    
                                    
                                    
                                     
                                     
                                      
                                      
                                      
                                      
                                       
                                       
                                       
                                       
                                        
                                        
                                        
                                        
                                         
                                         
                                          
                                          
                                          
                                          
                                           
                                           
                                           
                                           
                                            
                                            
                                             
                                             
                                             
                                             
                                              
                                              
                                               
                                               
                                               
                                               
                                                
                                                The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading. The state indicates that theDOMContentLoaded event has been fired.
                                               
                                               
                                              
                                              
                                            
                                            
                                          
                                          
                                         
                                         
                                       
                                       
                                      
                                      
                                     
                                     
                                   
                                   
                                   
                                   
                                    
                                    
                                    
                                                                         
                                     
                                      
                                      
                                       
                                       
                                        
                                                                                 
                                         
                                          
                                          
                                           
                                                                                       
                                            
                                             
                                             
                                             
                                             
                                              
                                              
                                               
                                               
                                               
                                               
                                                
                                                

                                               
                                               
                                              
                                              
                                            
                                            
                                          
                                          
                                         
                                         
                                       
                                       
                                      
                                      
                                     
                                     
                                   
                                   
                                   
                                   
                                    
                                    
                                    
                                                                         
                                     
                                      
                                      
                                       
                                       
                                        
                                                                                 
                                         
                                          
                                          
                                           
                                                                                       
                                            
                                             
                                             
                                             
                                             
                                              
                                              
                                               
                                               
                                               
                                               
                                                
                                                也就是说，文档本身已经被加载完毕，并且也已经被解析完毕，但是像image,css style文件等外部资源还在下载，这时意味着DOMContentLoaded事件的触发。
                                               
                                               
                                              
                                              
                                            
                                            
                                          
                                          
                                         
                                         
                                       
                                       
                                      
                                      
                                     
                                     
                                   
                                   
                                   
                                   
                                    
                                    在readyState状态的改变会触发readystatechange事件，我们可以通过为document绑定
                                    
                                    
                                     
                                     
                                      
                                      
                                      
                                      
                                       
                                       
                                       
                                       
                                        
                                        
                                        
                                        
                                         
                                         
                                          
                                          
                                          
                                          
                                           
                                           
                                           
                                           
                                            
                                            
                                             
                                             
                                             
                                             
                                              
                                              
                                               
                                               
                                               
                                               
                                                
                                                
                                                
                                                
                                                 
                                                 
                                                  
                                                  
                                                  
                                                  
                                                   
                                                   
                                                   
                                                   
                                                    
                                                    
                                                    
                                                    
                                                     
                                                     
                                                      
                                                      
                                                      
                                                      
                                                       
                                                       
                                                       
                                                       
                                                        
                                                        
                                                         
                                                         
                                                         
                                                         
                                                          
                                                          
                                                           
                                                           
                                                           
                                                           
                                                            
                                                            readystatechange事件来监听其状态的变化。
                                                           
                                                           
                                                          
                                                          
                                                        
                                                        
                                                      
                                                      
                                                     
                                                     
                                                   
                                                   
                                                  
                                                  
                                                 
                                                 
                                               
                                               
                                              
                                              
                                            
                                            
                                          
                                          
                                         
                                         
                                       
                                       
                                      
                                      
                                     
                                     
                                   
                                   
                                   
                                   
                                    
                                    
                                    
                                    
                                     
                                     
                                      
                                      
                                      
                                      
                                       
                                       
                                       
                                       
                                        
                                        
                                        
                                        
                                         
                                         
                                          
                                          
                                          
                                          
                                           
                                           
                                           
                                           
                                            
                                            
                                             
                                             
                                             
                                             
                                              
                                              
                                               
                                               
                                               
                                               
                                                
                                                
                                                
                                                
                                                 
                                                 
                                                  
                                                  
                                                  
                                                  
                                                   
                                                   
                                                   
                                                   
                                                    
                                                    
                                                    
                                                    
                                                     
                                                     
                                                      
                                                      
                                                      
                                                      
                                                       
                                                       
                                                       
                                                       
                                                        
                                                        
                                                         
                                                         
                                                         
                                                         
                                                          
                                                          
                                                           
                                                           
                                                           
                                                           
                                                            
                                                            
                                                            
                                                            注：IE4+,Firefox3.6+,chrome,Opera9+,Safari支持这两个属性
                                                            
                                                            

                                                            
                                                            
                                                            
                                                            
                                                              
                                                              
                                                               
                                                               
                                                               
                                                               
                                                                
                                                                
                                                                
                                                                
                                                                 
                                                                 
                                                                 
                                                                 
                                                                  
                                                                  
                                                                   
                                                                   
                                                                   
                                                                   
                                                                    
                                                                    
                                                                    
                                                                    
                                                                     
                                                                     
                                                                      
                                                                      
                                                                      
                                                                      
                                                                       
                                                                       
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         3.3.2 兼容模式
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         从IE6开始区分渲染页面的模式是标准还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。IE为此添加了一个compatMode属性用来标识页面渲染是标准模式还是混杂模式。如果是标准模式，这个属性值为"CSS1Compat"，而如果是混杂模式，这个属性值为"BackCompat"
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         除IE为，
                                                                         
                                                                         Firefox,chrome,Opera,Safari3.1+也都实现了这个属性，并最终被HTML纳入标准之中。
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         

                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         3.3.3 head属性
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         document.head可以引用页面中的<head>元素，当然还可以通过document.getElementsByTagName("head")[0]来引用<head>元素。
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         注：IE10+也支持这个属性
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         

                                                                        
                                                                        
                                                                        
                                                                        
                                                                        
                                                                        
                                                                         
                                                                         
                                                                          
                                                                          
                                                                           
                                                                           
                                                                            
                                                                                                                                                          
                                                                              
                                                                               
                                                                               
                                                                                
                                                                                                                                                                 
                                                                                 
                                                                                  
                                                                                  
                                                                                  
                                                                                                                                                                       
                                                                                     
                                                                                      
                                                                                      3.4 字符集属性
                                                                                          
                                                                                          
                                                                                           
                                                                                           
                                                                                            
                                                                                                                                                                                          
                                                                                              
                                                                                               
                                                                                               
                                                                                                
                                                                                                
                                                                                                  
                                                                                                  
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    HTML5新增了几个和字符集有关的属性，主要包括：
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    (1)lcharset：表示文档中实际使用的字符集，这个属性既可以通过<meta>标签来修改，也可以通过返回的http头部设置，还可以修改charset属性来设置。另外，firefox中支持characterSet属性，这个属性是只读的。
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    注：chrome45之后将charset属性设置成了只读的，IE 8及以下不支持characterSet属性
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    (2)defaultCharset：默认的字符集是什么，这个属性和浏览器或操作系统的设置有关系。
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    注：firefox不支持defaultCharset
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    

                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                   
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                                                                                                                         
                                                                                                     
                                                                                                      
                                                                                                      
                                                                                                       
                                                                                                                                                                                                                
                                                                                                         
                                                                                                          
                                                                                                          
                                                                                                           
                                                                                                                                                                                                                       
                                                                                                            
                                                                                                             
                                                                                                                                                                                                                             
                                                                                                                
                                                                                                                 
                                                                                                                                                                                                                                      
                                                                                                                     
                                                                                                                      
                                                                                                                      
                                                                                                                       
                                                                                                                                                                                                                                                
                                                                                                                         
                                                                                                                          
                                                                                                                          
                                                                                                                           
                                                                                                                                                                                                                                                       
                                                                                                                            
                                                                                                                             
                                                                                                                             
                                                                                                                              
                                                                                                                                                                                                                                                              
                                                                                                                                
                                                                                                                                 
                                                                                                                                 
                                                                                                                                  
                                                                                                                                                                                                                                                                     
                                                                                                                                   
                                                                                                                                    
                                                                                                                                                                                                                                                                           
                                                                                                                                       
                                                                                                                                        
                                                                                                                                        3.5 自定义属性
                                                                                                                                            
                                                                                                                                            
                                                                                                                                             
                                                                                                                                             
                                                                                                                                              
                                                                                                                                                                                                                                                                                              
                                                                                                                                                
                                                                                                                                                 
                                                                                                                                                 
                                                                                                                                                  
                                                                                                                                                  
                                                                                                                                                    
                                                                                                                                                    
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                      
                                                                                                                                                      HTML5规定可以为元素添加非标准的属性，但要添加一个"data-"前缀，目的是提供与渲染无关的信息或提供语义化的信息，比如我们有以下代码：
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                      
                                                                                                                                                      <div id="div" data-author="刘木林" data-uuid="123" data-age="23"></div>
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                      
                                                                                                                                                      

                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                      
                                                                                                                                                      一个元素的自定义属性保存在dataset属性中，这个值是DOMStringMap的实例，也就是一个键值对的映射。在这个映射中，每一个自定义属性都会有一个对应的属性，只不过这个属性名没有了data-前缀，我们仍然以上面的代码为例：
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                     
                                                                                                                                                      
                                                                                                                                                      var div = document.getElementById("div");
var data = div.dataset;
console.log(data.author);