Js的核心：找到DOM

2018-11-28 08:51:25来源：博客园阅读 ()

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>找到Dom-getElementBy—</title>
 7 </head>
 8 
 9 <body>
10     <div id="wrapper">
11         <div id="news-top" class="section">
12             <h3>Some title</h3>
13             <div class="content">
14                 <ul>
15                     <li><span>HTML</span><a href="">Some Link1</a></li>
16                     <li><span>JS</span><a class="active" href="">Some Link2</a></li>
17                     <li><span>CSS</span><a href="">Some Link3</a></li>
18                     <li><span>JS</span><a href="">Some Link4</a></li>
19                 </ul>
20             </div>
21             <img src="">
22             <p class="">Some Text</p>
23         </div>
24         <div id="news-normal" class="section">
25             <h3>Some title</h3>
26             <div class="content">
27                 <ul>
28                     <li><span>HTML</span><a href="">Some Link1</a></li>
29                     <li><span>HTML</span><a href="">Some Link2</a></li>
30                     <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
31                     <li><span>CSS</span><a href="">Some Link4</a></li>
32                     <li><span>JS</span><a class="active" href="#">Some Link1</a></li>
33                 </ul>
34             </div>
35             <img src="">
36             <p class="">Some Text</p>
37         </div>
38     </div>
39     <script>
40         function getAllListItem() {
41             // 返回页面中所有li标签
42             var list = document.getElementsByTagName("li");
43             console.log(list);
44         }
45 
46         function findAllHtmlSpanInOneSection(sectionId) {
47             // 返回某个section下所有span中内容为HTML的span标签
48             var section = document.getElementById(sectionId).getElementsByTagName("span");
49             for (i = 0; i < section.length; i++) {
50                 if (section[i].innerHTML === "HTML") {
51                     console.log(section[i]);
52                 }
53             }
54         }
55 
56         function findListItem(sectionId, spanCont) {
57             // 返回某个section下，所有所包含span内容为spanCont的LI标签
58             var section = document.getElementById(sectionId).getElementsByTagName("span");
59             for (i = 0; i < section.length; i++) {
60                 if (section[i].innerHTML === spanCont) {
61                     console.log(section[i].parentNode);
62                 }
63             }
64         }
65 
66         function getActiveLinkContent(sectionId) {
67             // 返回某个section下，class为active的链接中包含的文字内容
68             var section = document.getElementById(sectionId).getElementsByClassName("active");
69             for (i = 0; i < section.length; i++) {
70                 console.log(section[i].innerHTML);
71             }
72 
73         }
74 
75         getAllListItem();
76 
77         findAllHtmlSpanInOneSection("news-top");
78         findAllHtmlSpanInOneSection("news-normal");
79 
80         findListItem("news-top", "JS");
81         findListItem("news-normal", "JS");
82         findListItem("news-normal", "CSS");
83 
84         getActiveLinkContent("news-top");
85         getActiveLinkContent("news-normal");
86     </script>
87 </body>
88 
89 </html>

二、使用querySelector及querySelectorAll找DOM

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>找到Dom-querySelector—</title>
 7 </head>
 8 
 9 <body>
10     <div id="wrapper">
11         <div id="news-top" class="section">
12             <h3>Some title</h3>
13             <div class="content">
14                 <ul>
15                     <li><span>HTML</span><a href="">Some Link1</a></li>
16                     <li><span>JS</span><a class="active" href="">Some Link2</a></li>
17                     <li><span>CSS</span><a href="">Some Link3</a></li>
18                     <li><span>JS</span><a href="">Some Link4</a></li>
19                 </ul>
20             </div>
21             <img src="">
22             <p class="">Some Text</p>
23         </div>
24         <div id="news-normal" class="section">
25             <h3>Some title</h3>
26             <div class="content">
27                 <ul>
28                     <li><span>HTML</span><a href="">Some Link1</a></li>
29                     <li><span>HTML</span><a href="">Some Link2</a></li>
30                     <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
31                     <li><span>CSS</span><a href="">Some Link4</a></li>
32                     <li><span>JS</span><a class="active" href="#">Some Link1</a></li>
33                 </ul>
34             </div>
35             <img src="">
36             <p class="">Some Text</p>
37         </div>
38     </div>
39     <script>
40         function getAllListItem() {
41             // 返回页面中所有li标签
42             var list = document.querySelectorAll("li");
43             for (i = 0; i < list.length; i++) {
44                 console.log(list[i]);
45             }
46         }
47 
48         function findAllHtmlSpanInOneSection(sectionId) {
49             // 返回某个section下所有span中内容为HTML的span标签
50             var section = document.querySelector("#" + sectionId).querySelectorAll("span");
51             for (i = 0; i < section.length; i++) {
52                 if (section[i].innerHTML === "HTML") {
53                     console.log(section[i]);
54                 }
55             }
56         }
57 
58         function findListItem(sectionId, spanCont) {
59             // 返回某个section下，所有所包含span内容为spanCont的LI标签
60             var section = document.querySelector("#" + sectionId).querySelectorAll("span");
61             for (i = 0; i < section.length; i++) {
62                 if (section[i].textContent === spanCont) {
63                     console.log(section[i].parentNode);
64                 }
65             }
66         }
67 
68         function getActiveLinkContent(sectionId) {
69             // 返回某个section下，class为active的链接中包含的文字内容
70             var section = document.querySelector("#" + sectionId).querySelectorAll(".active");
71             for (i = 0; i < section.length; i++) {
72                 console.log(section[i].textContent);
73             }
74         }
75 
76         getAllListItem();
77 
78         findAllHtmlSpanInOneSection("news-top");
79         findAllHtmlSpanInOneSection("news-normal");
80 
81         findListItem("news-top", "JS");
82         findListItem("news-normal", "JS");
83         findListItem("news-normal", "CSS");
84 
85         getActiveLinkContent("news-top");
86         getActiveLinkContent("news-normal");
87     </script>
88 </body>
89 
90 </html>

三、注意点：

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         }