js中DOM查询元素方法总结

js中DOM查询元素方法主要包含getElementById、getElementsBy系列及querySelector系列，下面依次介绍下

• DOM规范类

一、getElementById

getElementById

getElementById返回的值类型为[object HTMLDivElement]
上图中测试的代码如下：

    
    




    

        
百度链接
    
    

二、 getElementsByClassName

getElementsByClassName

getElementsByClassName返回的值的类型为[object HTMLCollection]，在其后面添加数组编号[0]时，返回的值的类型就变为[object HTMLDivElement]

getElementsByClassName

三、getElementsByTagName

getElementsByTagName

getElementsByTagName

上述图中的代码为：

    
    




    

        
百度链接
    
    

getElementsByTagName的返回值类型为[object HTMLCollection]，加上数组编号[0]后会变成如下图所示的结果

getElementsByTagName

四、getElementsByName

getElementsByName

getElementsByName

getElementsByName疑问！！！！

getElementsByName返回的值类型是[object NodeList]类型而不是[object HTMLCollection] ！！！ 但是其返回的确实是元素的集合（HTMLCollection）而非节点的集合（NodeList）《javascript高级程序设计》第三版第258页

    
    


    

        
which color do you prefer
        

            

                Red 
            

                Green 
        
    
    

• selectors API规范类

一、 querySelector()

    
    





    

        百度链接
    

querySelector

querySelector 此时返回值类型为[object HTMLDivElement]，将上述代码改成如下形式：

    
    





    

        
我是child选择器ul里的li1
        
我是child选择器ul里的li2
    
    
我是child选择器的div 

querySelector 改后

二、querySelectorAll（）

将上述代码改成如下形式：

    
    





    

        
我是child选择器ul里的li1
        
我是child选择器ul里的li2
    
    
我是child选择器的div 

querySelectorAll

需要说明的是querySelectorAll返回的是静态（static）的NodeList！！！【一般NodeList及HTMLCollection均为实时的（live）】

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *