JavaScript获取文档元素

傷城~ 2022-07-15 11:07 275阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/53159348][http_blog.csdn.net_zhou_xiao_cheng_article_details_53159348]，未经博主允许不得转载。  
HTML原本只是一个静态的网页，但是JavaScript脚本的出现，使得这个静态的网页变成了一个可以进行交互的Web应用软件。  
若你写了一个HTML文档，并在里面[引入JavaScript脚本][JavaScript]，通常，浏览器都是按从上到下的顺序解析这个HTML文档的（存在异步请求的情况除外），当解析到JavaScript脚本时，JavaScript脚本就开始执行。因此，按照这个解析规则，HTML文档引入JavaScript脚本的位置就显得很重要了，举个栗子：有两个脚本分别是A和B，B需要使用A中的某个方法，那么，引入脚本时，Ａ就要在Ｂ的前面。  
如果JavaScript脚本中包含操作文档元素的代码，那么JavaScript首先必须要获取到文档元素（即Element对象），主流方法一共有四种：

*  通过id获取文档元素
    
        HTML：
        <div id="item">
        </div>
        
        JS：
        console.log(document.getElementById('item'));
        
        输出结果：
        "<div id='item'> </div>"
    
    输出的便是我们需要的Element对象了。这是最简单的一种获取文档元素的方法，并且，因为在一个文档中，id属性值都是唯一的，因而这种获取文档元素的方法也是最高效的。
 *  通过名字获取文档元素
    
        HTML：
        <div name="item">
        </div>
        
        JS：
        console.log(document.getElementsByName('item'))
        
        输出结果：
        实时NodeList对象（类数组对象）
    
    获取到的是一个类数组对象，想要获取到Element对象，加上相应的索引即可，如：`document.getElementsByName('item')[0]`。  
    注意：`getElementsByName()`定义在HTMLDocument类里，所以只对HTML文档适用，并且，在有的浏览器版本中，`getElementsByName()`也会返回符合`id属性值 = name属性值`的结果，为了避免这种情况，不建议使用这种方法去获取文档元素，同时，id的属性值与name的属性值最好不要相同。
 *  通过标签名获取文档元素
    
        HTML：
        <div>
          <span></span>
        </div>
        
        JS：
        console.log(document.getElementsByTagName('div'))
        
        输出结果：
        HTMLCollection对象（类数组对象）
 *  通过选择器获取文档元素
    
        HTML：
        <div class="item">
          <span></span>
        </div>
        
        JS：
        console.log(document.querySelectorAll('.item'))
        
        输出结果：
        非实时NodeList对象
    
    利用`querySelectorAll()`方法，客户端JavaScript脚本可以选择任意的文档元素进行操作，这种获取文档元素的方法可以说是终极大boss,因为所有的浏览器都支持该方法。它返回的是一个非实时的NodeList对象（即当该方法执行时，返回一个选择器所匹配到的元素的NodeList对象，当文档后面发生改变时，选择器所匹配到的元素可能已经发生了改变，但NodeList对象并不会因为文档的改变而更新）。  
    除了这个方法之外，还有`querySelector()`方法，与`querySelectorAll()`方法不同，该方法则是直接返回Element对象。

[http_blog.csdn.net_zhou_xiao_cheng_article_details_53159348]: http://blog.csdn.net/zhou_xiao_cheng/article/details/53159348
[JavaScript]: http://blog.csdn.net/zhou_xiao_cheng/article/details/53027539