溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
DOM對(duì)象：當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹。
打開網(wǎng)頁后，首先看到的是瀏覽器窗口，即頂層的window對(duì)象。
其次，看到的是網(wǎng)頁文檔的內(nèi)容，即document文檔。
首先看一下w3c提供的document對(duì)象的定義和其他相關(guān)知識(shí)：
現(xiàn)在我們來詳細(xì)的看一下document對(duì)象：
document.getElementById("d1");
根據(jù)id找元素，因?yàn)閕d是唯一的，只能找的一個(gè)元素
getElementsByClassName("c1");
根據(jù)class找元素，因?yàn)閏lass不唯一，可以找到多個(gè)元素，返回?cái)?shù)組
document.getElementsByTagName("div");
根據(jù)標(biāo)簽名找元素，因?yàn)闃?biāo)簽名不唯一，可以找到多個(gè)元素，返回?cái)?shù)組
document.getElementsByName("uname");
根據(jù)name找元素，主要用于表單元素，因?yàn)橛袉芜x等情況name不唯一，可以找到多個(gè)元素，返回?cái)?shù)組
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>無標(biāo)題文檔</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"); //根據(jù)id找元素19 var b = document.getElementsByClassName("c1"); //根據(jù)class找元素20 var c = document.getElementsByTagName("div"); //根據(jù)標(biāo)簽名找元素21 var d = document.getElementsByName("uname"); //根據(jù)name找元素22 alert(a+"\n"+b[1]+"\n"+c[0]+"\n"+d[0]);23 </script>
id=d1的返回值a，找到div元素
class=c1的返回值數(shù)組b，b[1]，數(shù)組b中的第二個(gè)元素，找到span元素
標(biāo)簽=div的返回值數(shù)組c，c[0]，數(shù)組c第一個(gè)元素，找到div元素
name=uname的返回值數(shù)組d，d[0]，數(shù)組d的第一個(gè)元素，找到input元素
如上我們可以看出除了根據(jù)id找元素，其他方法找元素都可以找到多個(gè)，返回?cái)?shù)組
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>無標(biāo)題文檔</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"); //根據(jù)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>
如上我們可以看出，找子元素會(huì)找到多個(gè)，返回的一定是數(shù)組，id為d1的元素內(nèi)有5個(gè)子元素三個(gè)文本，一個(gè)div元素，一個(gè)span元素
注意：這個(gè)方法不僅找出了標(biāo)簽內(nèi)的標(biāo)簽，還會(huì)找出文本，這里回車換行也被識(shí)別成文本寫入了數(shù)組
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>無標(biāo)題文檔</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"); //根據(jù)id找元素19 alert(a.parentNode);20 </script>
父級(jí)元素只能有一個(gè)，如上是id=d1的元素的父級(jí)元素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>無標(biāo)題文檔</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"); //根據(jù)id找元素17 alert(a.previousSibling+"\n"+a.nextSibling);18 </script>
在如上代碼中，我們先讓id=d1的元素緊貼跟前后不留回車等文本內(nèi)容，得出上一個(gè)同級(jí)元素沒有，下一個(gè)同級(jí)元素為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>無標(biāo)題文檔</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"); //根據(jù)id找元素18 var b = document.getElementById("d2");19 a.remove(); //移除元素 20 var s = document.createElement("p"); //創(chuàng)建元素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>無標(biāo)題文檔</title> 6 </head> 7 <body> 8 <div id="d1"> 9 <span>這是div中的span中的內(nèi)容</span>10 </div>11 <div id="d2">12 <span>這是div2中的span中的內(nèi)容</span>13 </div>14 <div id="d3">15 <span>這是div3中的span中的內(nèi)容</span>16 </div>17 </body>18 </html>19 <script>20 var a = document.getElementById("d1"); //根據(jù)id找元素21 var b = document.getElementById("d2");22 var c = document.getElementById("d3");23 alert(a.innerText+"\n"+a.innerHTML);24 b.innerText="hello"; //給元素賦值，針對(duì)文本，其他內(nèi)容會(huì)被替換25 c.innerHTML="<b>加粗</b>"26 </script>
以上我們可以看出innerText只會(huì)獲取內(nèi)容文本，而innerHTML會(huì)將內(nèi)容代碼一起獲取
這兩個(gè)方法不僅可獲取內(nèi)容，還可以賦值寫入內(nèi)容，賦值寫入的內(nèi)容會(huì)替換原來的內(nèi)容，并且通過innerHTML賦值寫入的內(nèi)容會(huì)和正常代碼一樣在網(wǎng)頁中生效
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>無標(biāo)題文檔</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>
如上我們可以通過調(diào)用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>無標(biāo)題文檔</title> 6 </head> 7 <body> 8 <div id="d1"> 9 <span>這是div中的span中的內(nèi)容</span>10 </div>11 <div id="d2">12 <span>這是div2中的span中的內(nèi)容</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屬性，和第二個(gè)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>無標(biāo)題文檔</title> 6 </head> 7 <body> 8 <div id="d1" > 9 這是div1中的內(nèi)容10 </div>11 <div id="d2" >12 這是div2中的內(nèi)容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"; //設(shè)置樣式,加的是內(nèi)聯(lián)的20 b.style.backgroundColor="red"; //設(shè)置樣式,加的是內(nèi)聯(lián)的21 alert(a.style.height); //獲取樣式22 b.style.backgroundColor=""; //移除樣式23 </script>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼