JavaScript物件之document物件
阿新 • • 發佈：2022-04-29
DOM物件之document物件
DOM物件：當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
HTML DOM 模型被構造為物件的樹。
開啟網頁後，首先看到的是瀏覽器視窗，即頂層的window物件。
其次，看到的是網頁文件的內容，即document文件。
首先看一下w3c提供的document物件的定義和其他相關知識：
現在我們來詳細的看一下document物件：
第一類：找元素
四種基本的找元素的方法
document.getElementById("d1");
根據id找元素，因為id是唯一的，只能找的一個元素
getElementsByClassName("c1");
根據class找元素，因為class不唯一，可以找到多個元素，返回陣列
document.getElementsByTagName("div");
根據標籤名找元素，因為標籤名不唯一，可以找到多個元素，返回陣列
document.getElementsByName("uname");
根據name找元素，主要用於表單元素，因為有單選等情況name不唯一，可以找到多個元素，返回陣列
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文件</title> 6 </head> 7 <body> 8 <div id="d1"> 9 <div></div> 10 <span></span> 11 </div> 12 <div class="c1"></div> 13 <span class="c1"></span> 14 <input type="button" name="uname" /> 15 </body> 16 </html> 17 <script> 18 var a = document.getElementById("d1"); //根據id找元素 19 var b = document.getElementsByClassName("c1"); //根據class找元素 20 var c = document.getElementsByTagName("div"); //根據標籤名找元素 21 var d = document.getElementsByName("uname"); //根據name找元素 22 alert(a+"n"+b[1]+"n"+c[0]+"n"+d[0]); 23 </script>
id=d1的返回值a，找到div元素
class=c1的返回值陣列b，b[1]，陣列b中的第二個元素，找到span元素
標籤=div的返回值陣列c，c[0]，陣列c第一個元素，找到div元素
name=uname的返回值陣列d，d[0]，陣列d的第一個元素，找到input元素
如上我們可以看出除了根據id找元素，其他方法找元素都可以找到多個，返回陣列
複雜的找元素
a.childNodes[0]方法找該元素的子元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文件</title> 6 </head> 7 <body> 8 <div id="d1"> 9 <div></div> 10 <span></span> 11 </div> 12 <div class="c1"></div> 13 <span class="c1"></span> 14 <input type="button" name="uname" /> 15 </body> 16 </html> 17 <script> 18 var a = document.getElementById("d1"); //根據id找元素 19 alert(a.childNodes[0]+"n"+a.childNodes[1]+"n"+a.childNodes[2]+"n"+a.childNodes[3]+"n"+a.childNodes[4]+"n"+a.childNodes[5]+"n"); 20 </script>
如上我們可以看出，找子元素會找到多個，返回的一定是陣列，id為d1的元素內有5個子元素三個文字，一個div元素，一個span元素
注意：這個方法不僅找出了標籤內的標籤，還會找出文字，這裡回車換行也被識別成文字寫入了陣列
a.parentNode 找父級元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <div id="d1">
9 <div></div>
10 <span></span>
11 </div>
12 <div class="c1"></div>
13 <span class="c1"></span>
14 <input type="button" name="uname" />
15 </body>
16 </html>
17 <script>
18 var a = document.getElementById("d1"); //根據id找元素
19 alert(a.parentNode);
20 </script>
父級元素只能有一個，如上是id=d1的元素的父級元素body元素
找同級元素
a.previousSibling 找上一個同級元素
a.nextSibling 找下一個同級元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body><div id="d1">
8 <div></div>
9 <span></span>
10 </div><div class="c1"></div>
11 <span class="c1"></span>
12 <input type="button" name="uname" />
13 </body>
14 </html>
15 <script>
16 var a = document.getElementById("d1"); //根據id找元素
17 alert(a.previousSibling+"n"+a.nextSibling);
18 </script>
在如上程式碼中，我們先讓id=d1的元素緊貼跟前後不留回車等文字內容，得出上一個同級元素沒有，下一個同級元素為div
第二類：控制元素
remove刪除元素
createElement建立元素
appendChild追加元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <div id="d1">
9 <div></div>
10 <span></span>
11 </div>
12 <div id="d2">
13 </div>
14 </body>
15 </html>
16 <script>
17 var a = document.getElementById("d1"); //根據id找元素
18 var b = document.getElementById("d2");
19 a.remove(); //移除元素
20 var s = document.createElement("p"); //建立元素
21 b.appendChild(s); //追加元素
22 </script>
通過審查元素，我們可以看到id=d1的元素已被移除，id=d2的元素被追加了子元素<p>
第三類：操作內容
普通元素的操作
innerText獲取內容文字
innerHTML獲取內容程式碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <div id="d1">
9 <span>這是div中的span中的內容</span>
10 </div>
11 <div id="d2">
12 <span>這是div2中的span中的內容</span>
13 </div>
14 <div id="d3">
15 <span>這是div3中的span中的內容</span>
16 </div>
17 </body>
18 </html>
19 <script>
20 var a = document.getElementById("d1"); //根據id找元素
21 var b = document.getElementById("d2");
22 var c = document.getElementById("d3");
23 alert(a.innerText+"n"+a.innerHTML);
24 b.innerText="hello"; //給元素賦值，針對文字，其他內容會被替換
25 c.innerHTML="<b>加粗</b>"
26 </script>
以上我們可以看出innerText只會獲取內容文字，而innerHTML會將內容程式碼一起獲取
這兩個方法不僅可獲取內容，還可以賦值寫入內容，賦值寫入的內容會替換原來的內容，並且通過innerHTML賦值寫入的內容會和正常程式碼一樣在網頁中生效
表單元素的操作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <input type="text" name="uname" id="d5"/>
9 </body>
10 </html>
11 <script>
12 var a = document.getElementById("d5");
13 a.value="hello"; //給元素賦值
14 alert(a.value); //元素的取值
15 </script>
如上我們可以通過呼叫value來給表單元素賦值和取值。
第四類：操作屬性
setAttribute(屬性名,屬性值)設定屬性
removeAttribute(屬性名)移除屬性
getAttribute(屬性名)獲取屬性
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <div id="d1">
9 <span>這是div中的span中的內容</span>
10 </div>
11 <div id="d2">
12 <span>這是div2中的span中的內容</span>
13 </div>
14 </body>
15 </html>
16 <script>
17 var a = document.getElementById("d1");
18 var b = document.getElementById("d2");
19 a.setAttribute("bs",100); //新增屬性bs=100
20 b.setAttribute("bs",100); //新增屬性bs=100
21 alert(a.getAttribute("bs")); //獲取屬性bs的值
22 b.removeAttribute("bs"); //刪除b的屬性bs
23 </script>
如上我們可以看出我們新增的bs屬性，和第二個div中被移除的bs屬性，以及獲取的bs屬性。
第五類：操作樣式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標題文件</title>
6 </head>
7 <body>
8 <div id="d1" style="height:100px;broder:1px">
9 這是div1中的內容
10 </div>
11 <div id="d2" style="height:100px">
12 這是div2中的內容
13 </div>
14 </body>
15 </html>
16 <script>
17 var a = document.getElementById("d1");
18 var b = document.getElementById("d2");
19 a.style.backgroundColor="red"; //設定樣式,加的是內聯的
20 b.style.backgroundColor="red"; //設定樣式,加的是內聯的
21 alert(a.style.height); //獲取樣式
22 b.style.backgroundColor=""; //移除樣式
23 </script>
如上我們可以新增樣式，也可以獲取樣式的值，還可以用樣式的值為空的方式來移除樣式。