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找元素，其他方法找元素都可以找到多個，返回數組
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元素
注意：這個方法不僅找出了標簽內的標簽，還會找出文本，這里回車換行也被識別成文本寫入了數組
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元素
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
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>
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來給表單元素賦值和取值。
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=10020 b.setAttribute("bs",100); //添加屬性bs=10021 alert(a.getAttribute("bs")); //獲取屬性bs的值22 b.removeAttribute("bs"); //刪除b的屬性bs23 </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" > 9 這是div1中的內容10 </div>11 <div id="d2" >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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
