javascript DOM的詳解及實(shí)例代碼
javascript DOM 總結(jié)
一直以為DOM(文檔對(duì)象模型)是JS中最簡(jiǎn)單的一部分。不可否認(rèn),它確實(shí)很簡(jiǎn)單,因?yàn)镈OM的思維模式有點(diǎn)固定,只需要簡(jiǎn)單地記住一些固定的方法,所以DOM可以說是所有js(這里指的是客戶端的js)入門的起手點(diǎn)。
最近我在做一些有用到DOM的練習(xí)時(shí),發(fā)現(xiàn)自己的DOM知識(shí)非常零散(一直以為掌握的很好),可能有很多朋友都覺得,DOM嘛,也就調(diào)用調(diào)用幾個(gè)方法,或者我直接使用jQuery,根本不用考慮DOM的細(xì)節(jié)。是,這也沒錯(cuò),jQuery對(duì)DOM的封裝可謂前無古人,但是正如成長(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í)可以想象成樹狀結(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)類型標(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),樹的根節(jié)點(diǎn))
tip one (文檔的子節(jié)點(diǎn)):
1.document.documentElement可以取到html對(duì)象,同樣可以通過document.childNodes[0]以及document.firstchild取到。然而 documentElement可以更快,更直接訪問元素。
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.通過id : document.getElementById("xxx"); 一般頁(yè)面id會(huì)不同,若有多個(gè)相同id,則取到第一個(gè)有該id的元素。
2.通過tagName : document.getElementsByTagName("xxx"); 返回標(biāo)簽名為"xxx"的元素集合!
3.通過name : document.getElementByName();
理解document對(duì)象非常簡(jiǎn)單,兼容性做的也比較靠前。
2.元素節(jié)點(diǎn)
元素節(jié)點(diǎn)提供了對(duì)元素標(biāo)簽名,子節(jié)點(diǎn)及特性的訪問。它的基本特征如下:
var ele = document.getElementById("element"); //通過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及以下的版本中,三種方法存在著一些異常行為,通過set設(shè)置class 和style特性,特別是事件處理程序時(shí),沒有任何效果,get也是同樣的。因此一般開發(fā)要避免以上三種方法,推薦通過屬性來設(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ù),然而陷阱隨之而來 console.log(mL.childNodes); // 7 //?!怎么會(huì)有7個(gè)? //原因在于childNodes中不僅包含了元素節(jié)點(diǎn),還有4個(gè)文本節(jié)點(diǎn)。因此需要過濾 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] //前面也提過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的入門點(diǎn),但是也需要很長(zhǎng)時(shí)間的打磨。我看了DOM不少于三遍,僅僅是DOM1級(jí)規(guī)范,每次都有些新東西。如果你學(xué)習(xí)DOM,那么就一定要注意一些陷阱,同時(shí)也要多花時(shí)間琢磨?!?/p>
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
BootStrap Table對(duì)前臺(tái)頁(yè)面表格的支持實(shí)例講解
bootstrap-table是在bootstrap的基礎(chǔ)上面做了一些封裝,所以在使用bootstrap-table之前要導(dǎo)入的js和css,下面通過本文給大家詳細(xì)介紹需要引入的文件,對(duì)bootstrap table 表格感興趣的朋友一起看看吧2016-12-12JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11js通過Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js通過Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫時(shí)動(dòng)畫抖動(dòng)的原因與解決方法
最近在使用JS動(dòng)畫做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動(dòng)畫執(zhí)行時(shí)間內(nèi)快速移開鼠標(biāo)時(shí)會(huì)出現(xiàn)動(dòng)畫因鼠標(biāo)移動(dòng)過快從而導(dǎo)致代碼沖突讓畫面抖動(dòng)的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫時(shí)動(dòng)畫抖動(dòng)的原因與解決方法,需要的朋友可以參考下2022-06-06Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解
這篇文章主要介紹了Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解,本文講解了列表的抽象數(shù)據(jù)類型定義、如何實(shí)現(xiàn)列表類等內(nèi)容,需要的朋友可以參考下2015-03-03