Js的核心：找到DOM

本文轉載自查看原文 2018-11-28 14:36 715 JavaScript

掌握 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         }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS核心之DOM操作上 JS核心之DOM操作下核心dom和html dom的區別 vue核心之虛擬DOM vue核心---虛擬dom的實現 vue核心之虛擬DOM(vdom) 瀏覽器中開發人員工具快速找到dom元素綁定那些JS事件解密jQuery內核 DOM操作的核心buildFragment JS 之DOM range對象 js——DOM的Element類型（四）