掌握 JavaScript 的核心之一：DOM，能够熟悉DOM相关操作，了解JavaScript事件机制

一、使用getElementById()、getElementsByTagName()、childNodes、parentNode找DOM

1  2  3  4  5     
      6      7  8  9 10     
     
      11         
      
       12             
       
Some title
13             
       
        14                 
        
         15                     
         
HTMLSome Link1
16                     
         
JSSome Link2
17                     
         
CSSSome Link3
18                     
         
JSSome Link4
19                 
        
20             
       
21             
       22             
       
Some Text
23         
      
24         
      
       25             
       
Some title
26             
       
        27                 
        
         28                     
         
HTMLSome Link1
29                     
         
HTMLSome Link2
30                     
         
JSSome Link3
31                     
         
CSSSome Link4
32                     
         
JSSome Link1
33                 
        
34             
       
35             
       36             
       
Some Text
37         
      
38     
     
39     87 88 89 

二、使用querySelector及querySelectorAll找DOM

1  2  3  4  5     
      6      7  8  9 10     
     
      11         
      
       12             
       
Some title
13             
       
        14                 
        
         15                     
         
HTMLSome Link1
16                     
         
JSSome Link2
17                     
         
CSSSome Link3
18                     
         
JSSome Link4
19                 
        
20             
       
21             
       22             
       
Some Text
23         
      
24         
      
       25             
       
Some title
26             
       
        27                 
        
         28                     
         
HTMLSome Link1
29                     
         
HTMLSome Link2
30                     
         
JSSome Link3
31                     
         
CSSSome Link4
32                     
         
JSSome Link1
33                 
        
34             
       
35             
       36             
       
Some Text
37         
      
38     
     
39     88 89 90 

三、注意点：

innerText  与 innerHtml 都是打印标签之间的文本信息

1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent

2、innerHtml 打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印

3、但是使用innerText 会有兼容性，低版本的火狐浏览器不支持使用，而是支持使用textContent，因此我们需要封装一个兼容版本，以及调用方法

1  　　　　var box = document.getElementById("box"); 2         调用方法 3         var str = getText(box); 4         console.log(str); 5         /** 6          * 封装了一个获取标签之间的文本信息兼容版本函数 7          * @param element 标签对象 8          * @returns {*} 9          */10         function getText(element) {11             if(element.innerText) {12                 return element.innerText;   //IE8及之前的浏览器支持，现在两者都支持13             }else {14                 return element.textContent; //低版本的火狐支持15             }16         }