Javascript中怎么獲取DOM節(jié)點

這篇文章給大家介紹Javascript中怎么獲取DOM節(jié)點，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

　　DOM節(jié)點和節(jié)點樹有什么關(guān)系

　　DOM節(jié)點之間都有等級關(guān)系，包括父節(jié)點、子節(jié)點、兄弟節(jié)點(同輩節(jié)點)、后代、父輩 等。

　　html>

　　head>

　　title>DOM節(jié)點之間的關(guān)系/title>

　　/head>

　　body>

　　h2>這是標(biāo)題/h2>

　　p>這是內(nèi)容/p>

　　/body>

　　/html>

　　從上面的代碼可以看出：

　　除文檔節(jié)點(根節(jié)點)之外的每個節(jié)點都有父節(jié)點。

　　例如，head> 和 body> 的父節(jié)點是 html> 節(jié)點，文本節(jié)點“ 這是內(nèi)容 ”的父節(jié)點是 p> 節(jié)點。

　　大部分元素節(jié)點都有子節(jié)點。

　　例如，head> 節(jié)點有一個子節(jié)點：title> 節(jié)點;title> 節(jié)點也有一個子節(jié)點：文本節(jié)點“ 這是標(biāo)題 ”。

　　當(dāng)節(jié)點擁有共同的父節(jié)點時，它們就是兄弟節(jié)點(同輩節(jié)點)。

　　例如，h2> 和 p>是兄弟節(jié)點，它們的父節(jié)點均是 body> 節(jié)點。

　　節(jié)點也可以擁有后代，后代指某個節(jié)點的所有子節(jié)點，或者這些子節(jié)點的子節(jié)點，以此類推。

　　例如，所有的文本節(jié)點都是 html>節(jié)點的后代，而第一個文本節(jié)點是 head> 節(jié)點的后代。

　　節(jié)點也可以擁有先輩。先輩是某個節(jié)點的父節(jié)點，或者父節(jié)點的父節(jié)點，以此類推。

　　例如，所有的文本節(jié)點都可把 html> 節(jié)點作為先輩節(jié)點。

　　Javascript獲取DOM節(jié)點方法有什么

　　對DOM節(jié)點進(jìn)行操作之前，首先要獲取DOM節(jié)點。

　　獲取DOM節(jié)點的方法有很多，可以根據(jù) id屬性 、 標(biāo)簽名稱 獲取，也可以獲取子節(jié)點、父輩節(jié)點、上個節(jié)點和下個節(jié)點。

　　本節(jié)講解根據(jù)HTML標(biāo)簽的id屬性和標(biāo)簽名稱來獲取節(jié)點。

　　getElementById( )方法

　　根據(jù)HTML標(biāo)簽的id屬性來獲取DOM節(jié)點請使用 getElementById( ) 方法。該方法返回一個節(jié)點對象。

　　語法：

　　document.getElementById(id)

　　其中，id 為HTML標(biāo)簽的 id 屬性。

　　例如，獲得id="demo"的節(jié)點的語句為：

　　document.getElementById("demo");

　　該語句的返回值為 [ object HTMLDivElement ] (元素節(jié)點對象)。

　　舉例，獲取幾個典型的元素節(jié)點：

　　div id="demo_div">我是 標(biāo)簽/div>

　　p id="demo_p">我是

標(biāo)簽/p>

　　h6 id="demo_h6">我是

標(biāo)簽/h6>

　　script type="text/javascript">

　　function getNode(ele){

　　alert(

　　"獲取到的元素節(jié)點："+ele+"\n"+

　　"id屬性："+ele.getAttribute("id")+"\n"+

　　"節(jié)點類型："+ele.nodeType+"\n"+

　　"文本內(nèi)容："+ele.firstChild.nodeValue

　　);

　　}

　　document.getElementById("demo_div").onclick=function(){

　　getNode(this); // this 指向當(dāng)前發(fā)生鼠標(biāo)單擊事件的節(jié)點

　　}

　　document.getElementById("demo_p").onclick=function(){

　　getNode(this); // this 指向當(dāng)前發(fā)生鼠標(biāo)單擊事件的節(jié)點

　　}

　　document.getElementById("demo_h6").onclick=function(){

　　getNode(this); // this 指向當(dāng)前發(fā)生鼠標(biāo)單擊事件的節(jié)點

　　}

　　/script>

關(guān)于Javascript中怎么獲取DOM節(jié)點就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。