javascriptDOM的詳解及實(shí)例代碼

javascript DOM 總結(jié)

十多年的白沙黎族網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整白沙黎族建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“白沙黎族網(wǎng)站設(shè)計(jì)”,“白沙黎族網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一直以為DOM（文檔對(duì)象模型）是JS中最簡(jiǎn)單的一部分。不可否認(rèn)，它確實(shí)很簡(jiǎn)單，因?yàn)镈OM的思維模式有點(diǎn)固定，只需要簡(jiǎn)單地記住一些固定的方法，所以DOM可以說(shuō)是所有js(這里指的是客戶(hù)端的js)入門(mén)的起手點(diǎn)。

最近我在做一些有用到DOM的練習(xí)時(shí)，發(fā)現(xiàn)自己的DOM知識(shí)非常零散(一直以為掌握的很好)，可能有很多朋友都覺(jué)得，DOM嘛，也就調(diào)用調(diào)用幾個(gè)方法，或者我直接使用jQuery，根本不用考慮DOM的細(xì)節(jié)。是，這也沒(méi)錯(cuò)，jQuery對(duì)DOM的封裝可謂前無(wú)古人，但是正如成長(zhǎng)一樣，跑之前是一定要會(huì)走的，所以我認(rèn)為對(duì)DOM必須要有比較詳細(xì)的了解，于是我總結(jié)了如下的關(guān)于DOM的一些使用方法。

在W3C總結(jié)跪DOM規(guī)范中，有一些十分常用的，也有些不怎么有用的，這里我們主要討論常用一些DOM操作(有關(guān)DOM的基本概念在此就不介紹了)：

　　節(jié)點(diǎn)層次

所謂節(jié)點(diǎn)層次，指的是html文檔中存在具有各自特點(diǎn)，數(shù)據(jù)，方法的節(jié)點(diǎn)(例如標(biāo)簽)，節(jié)點(diǎn)之間的關(guān)系構(gòu)成了層次(其實(shí)可以想象成樹(shù)狀結(jié)構(gòu))。W3C的DOM1級(jí)規(guī)范中定義了一個(gè)NODE接口。這個(gè)接口有一些方法是非常有用的:

　Node.ELEMENT_NODE;(元素節(jié)點(diǎn))

　Node.TEXT_NODE;(文本節(jié)點(diǎn))

　Node.DOCUMENT_NODE(文檔節(jié)點(diǎn))

而每個(gè)節(jié)點(diǎn)都有自己的節(jié)點(diǎn)類(lèi)型標(biāo)志，也就是NodeType屬性，例如元素節(jié)點(diǎn)的nodeType == '1';文本節(jié)點(diǎn)的nodeType == '3';文檔節(jié)點(diǎn)的nodeType == '9';

　　1.文檔節(jié)點(diǎn)

   文檔節(jié)點(diǎn)在一個(gè)文檔中用document對(duì)象表示，它的基本特征如下:

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已經(jīng)是最頂層的節(jié)點(diǎn)，樹(shù)的根節(jié)點(diǎn))

 　　tip one (文檔的子節(jié)點(diǎn)):

1.document.documentElement可以取到html對(duì)象，同樣可以通過(guò)document.childNodes[0]以及document.firstchild取到。然而　documentElement可以更快，更直接訪問(wèn)元素。

tip two (文檔的相關(guān)信息):

1.取得文檔標(biāo)題 : document.title;

2.取得完整的url : document.URL;

3.取得域名(ip) : document.domain;

4.取得頁(yè)面的URL : document.referrer;

tip three (文檔查找元素):

1.通過(guò)id : document.getElementById("xxx");  一般頁(yè)面id會(huì)不同，若有多個(gè)相同id，則取到第一個(gè)有該id的元素。

2.通過(guò)tagName : document.getElementsByTagName("xxx"); 返回標(biāo)簽名為"xxx"的元素集合!

3.通過(guò)name : document.getElementByName();

理解document對(duì)象非常簡(jiǎn)單，兼容性做的也比較靠前。

　　2.元素節(jié)點(diǎn)

元素節(jié)點(diǎn)提供了對(duì)元素標(biāo)簽名，子節(jié)點(diǎn)及特性的訪問(wèn)。它的基本特征如下:

var ele = document.getElementById("element"); //通過(guò)document取到一個(gè)標(biāo)簽對(duì)象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的標(biāo)簽名 
console.log(ele.nodeValue); //永遠(yuǎn)返回null!

　　tip one (html元素) :

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

var div = document.getElementById("div");

1. console.log(div.id); // "myDiv"

2. console.log(div.className); // "bd"

3. console.log(div.title); // "Body text"

4. console.log(div.lang); // "en"

5. console.log(div.dir); // "ltr"

 　tip two (取得,設(shè)置和刪除特性):

1.div.getAttribute("id"); // "myDiv"

2.div.setAttribuye("id","yourDiv"); // id已變動(dòng)

3.div.removeAttribute("id"); //id已刪除

需要注意:  在IE7及以下的版本中，三種方法存在著一些異常行為，通過(guò)set設(shè)置class 和style特性，特別是事件處理程序時(shí)，沒(méi)有任何效果，get也是同樣的。因此一般開(kāi)發(fā)要避免以上三種方法，推薦通過(guò)屬性來(lái)設(shè)置特性。

 　tip three (元素的子節(jié)點(diǎn)) :

要重點(diǎn)提一下的就是這里了，有如下代碼:

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//很明顯mL對(duì)象有三個(gè)元素節(jié)點(diǎn)，我們也知道用childNodes屬性去找到節(jié)點(diǎn)數(shù)，然而陷阱隨之而來(lái) 
 
console.log(mL.childNodes); // 7 
//?!怎么會(huì)有7個(gè)? 
 
//原因在于childNodes中不僅包含了元素節(jié)點(diǎn)，還有4個(gè)文本節(jié)點(diǎn)。因此需要過(guò)濾 
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ // 利用元素節(jié)點(diǎn)的特性 
     // .... 
   }   
}<br>//最好的方法可以這么做<br>//如果元素對(duì)象內(nèi)部標(biāo)簽名是一樣的<br>var items = ml.getElementsByTagName("li"); //能得到三個(gè)li節(jié)點(diǎn)對(duì)象 
　　

　3.文本節(jié)點(diǎn)

文本節(jié)點(diǎn)包含的是可以照字面解釋的純文本內(nèi)容，純文本中可以包含轉(zhuǎn)義后的HTML字符，但不能包含HTML代碼。文本節(jié)點(diǎn)的基本特征如下:

<div id="myDiv">123</div> 
 
var myDiv = document.getElementById("myDiv") //取到元素節(jié)點(diǎn) 
var tx = myDiv.childNodes[0] //前面也提過(guò)childNodes的特性，這次取到了文本節(jié)點(diǎn) 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本節(jié)點(diǎn)的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(節(jié)點(diǎn)包含的文本)，注意元素節(jié)點(diǎn)是不能取到它包含的文本節(jié)點(diǎn)的文本的 
 
//所以其父節(jié)點(diǎn)顯然是個(gè)元素節(jié)點(diǎn).

Tip one :

創(chuàng)建文本節(jié)點(diǎn)的兩個(gè)方法:document.createTextNode(),document.createText();

創(chuàng)建好后不會(huì)直接嵌入文檔中，需要引用。

var a = document.createElement("p");

　　　　var b = document.createTextNode("123");

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

這樣在body末尾會(huì)出現(xiàn)<p>123</p>這樣的標(biāo)簽

個(gè)人認(rèn)為DOM肯定是學(xué)習(xí)js的入門(mén)點(diǎn)，但是也需要很長(zhǎng)時(shí)間的打磨。我看了DOM不少于三遍，僅僅是DOM1級(jí)規(guī)范，每次都有些新東西。如果你學(xué)習(xí)DOM，那么就一定要注意一些陷阱，同時(shí)也要多花時(shí)間琢磨?！?/p>

 感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

網(wǎng)站欄目：javascriptDOM的詳解及實(shí)例代碼
文章分享：http://muchs.cn/article34/gpjcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、微信小程序、云服務(wù)器、網(wǎng)站排名、App設(shè)計(jì)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)