第二节 DOM-Document对象
一. 整體介紹
??這里介紹DOM對象中的Document對象。
何為Document對象？每個(gè)載入瀏覽器的HTML文檔都會(huì)成為Document對象，Document對象可以幫助我們對所有的HTML文檔進(jìn)行訪問。
任何一個(gè)對象都會(huì)有屬性和方法，當(dāng)然Document對象也不例外，Document對象有對象集合、對象屬性、對象方法，但對象集和對象屬性用的相對不是很多，這里不過多介紹（感興趣的話可以查閱
W3C：http://www.w3school.com.cn/jsref/dom_obj_document.asp），主要介紹Document對象的方法。
二. 詳細(xì)介紹
?Document對象的方法包括：
最重要的三個(gè)查找方法：getElementById()、getElementsByClassName()、getElementsByTagName() ; 分別是根據(jù)id、類名、標(biāo)簽名來查找。
? ? ? ? ? ?其他方法：open() 、close() 、write() 、writeIn() 。
1.?getElementById()
? ?根據(jù)元素的id來獲取該元素對象，通過該方法獲取的元素對象是唯一的，可以直接對其進(jìn)行操作。
??? 2. getElementsByClassName()
? ?根據(jù)元素的class類名來獲取該元素對象，通過該方法獲取的元素對象是一個(gè)偽數(shù)組，需要通過偽數(shù)組的方式對其進(jìn)行訪問。
? ??3. getElementsByTagName()
? ?根據(jù)元素的標(biāo)簽名來獲取該元素對象，通過該方法獲取的元素對象是一個(gè)偽數(shù)組，需要通過偽數(shù)組的方式對其進(jìn)行訪問。
? ?補(bǔ)充：什么是偽數(shù)組？偽數(shù)組和數(shù)組有什么區(qū)別？
偽數(shù)組是只有數(shù)組的部分功能（下標(biāo)的調(diào)用和length屬性），但是卻不能調(diào)用數(shù)組中的方法(eg: pop()、push()、unshift())。
? ? ? ?常見的偽數(shù)組有：A：arguments集合(后續(xù)介紹Function對象時(shí)介紹)
?B：DOM集合(getElementsByClassName和getElementsByTagName)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? C：JQuery框架本身就是一個(gè)偽數(shù)組
? ? ? 下面通過代碼來詳細(xì)分析一下偽數(shù)組的用法，以及偽數(shù)組和真數(shù)組如何轉(zhuǎn)換
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style type="text/css">7 div {8 width: 50px;9 height: 50px; 10 border: 1px solid black; 11 } 12 </style> 13 <script type="text/javascript"> 14 window.onload = function() { 15 /* 偽數(shù)組：只有數(shù)組的部分功能(length和下標(biāo))，無法訪問數(shù)組對象中的方法 16 常見的偽數(shù)組有： 17 1. arguments 18 2. Dom集合 : document.getElementsByClassName() 19 document.getElementsByTagName() 20 3. JQuery框架本身就是一個(gè)偽數(shù)組 21 * */ 22 23 //1. 運(yùn)用 24 var divs = document.getElementsByTagName('div'); 25 //下面這句話報(bào)錯(cuò) 26 //因?yàn)閐ivs是一個(gè)偽數(shù)組，不能調(diào)用數(shù)組的pop方法 27 //divs.pop().style.backgroundColor = "yellow"; 28 29 //核心知識點(diǎn)：將偽數(shù)組轉(zhuǎn)換成真數(shù)組 30 //Array.prototype.slice.call("偽數(shù)組名"); 31 var realdivs = Array.prototype.slice.call(divs); 32 realdivs.pop().style.backgroundColor = "pink"; 33 34 //2. 自定義偽數(shù)組 35 var firstDivs = { 0: 'name', 1: 'maru' ,length:2}; 36 console.log(firstDivs); 37 console.log(Array.prototype.slice.call(firstDivs)); 38 }; 39 </script> 40 </head> 41 42 <body> 43 <div>1</div> 44 <div>2</div> 45 <div>3</div> 46 <div>4</div> 47 </body> 48 49 </html>? 下面通過代碼繼續(xù)介紹以上三個(gè)方法的具體使用：
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <script type="text/javascript">7 window.onload = function() {8 //1.getElementById()9 document.getElementById("btn1").onclick = function() { 10 var obj = document.getElementById("btn1"); 11 console.log(obj); 12 }; 13 //2.getElementsByClassName() 14 document.getElementById("btn2").onclick = function() { 15 var obj = document.getElementsByClassName("box1"); 16 console.log(obj); 17 //調(diào)用偽數(shù)組 18 console.log('個(gè)數(shù)為:' + obj.length); 19 for(var i = 0; i < obj.length; i++) { 20 console.log('逐個(gè)輸出:' + obj[i]); 21 } 22 //轉(zhuǎn)換成真數(shù)組 23 console.log(Array.prototype.slice.call(obj)); 24 }; 25 //3.getElementsByTagName() 26 document.getElementById("btn3").onclick = function() { 27 var obj = document.getElementsByTagName("div"); 28 console.log(obj); 29 //調(diào)用偽數(shù)組 30 console.log('個(gè)數(shù)為:' + obj.length); 31 for(var i = 0; i < obj.length; i++) { 32 console.log('逐個(gè)輸出:' + obj[i]); 33 } 34 //轉(zhuǎn)換成真數(shù)組 35 console.log(Array.prototype.slice.call(obj)); 36 }; 37 }; 38 </script> 39 </head> 40 <body> 41 <button id="btn1">getElementById</button> 42 <button id="btn2">getElementsByClassName</button> 43 <button id="btn3">getElementsByTagName</button> 44 <div id="123"> 45 </div> 46 <div id="div1"> 47 <div class="box1"> 48 <div class="box1"> 49 </div> 50 </div> 51 </div> 52 <div class="box1"> 53 </div> 54 </body> 55 </html>?
結(jié)論：
? ?
? 4. open()-close()
? ? ?打開一個(gè)新文檔，并擦出當(dāng)前文檔的內(nèi)容，新文檔用 write() 方法或 writeln() 方法編寫，但必須要用close()方法關(guān)閉該文檔，迫使其內(nèi)容顯示出來。
注意：一旦調(diào)用了 close()，就不應(yīng)該再次調(diào)用 write()，因?yàn)檫@會(huì)隱式地調(diào)用 open() 來擦除當(dāng)前文檔并開始一個(gè)新的文檔。
5. write()-writeIn()
? ??向文檔寫 HTML 表達(dá)式 或 JavaScript 代碼，但是write不換行，writeIn換行? ? ?
1 var newDoc = document.open("text/html", "replace"); 2 var txt = "<html><body>Learning about the DOM is FUN!</body></html>"; 3 newDoc.write(txt); 4 newDoc.write(txt); 5 //write不換行，writeIn換行 6 newDoc.writeln(txt); 7 newDoc.writeln(txt); 8 newDoc.close();總結(jié)
以上是生活随笔為你收集整理的第二节 DOM-Document对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度钱包还信用卡失败退款要多久
- 下一篇： ABP入门系列（14）——应用Boots