Javascript中怎么獲取DOM節點

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

　　DOM節點和節點樹有什么關系

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

　　html>

　　head>

　　title>DOM節點之間的關系/title>

　　/head>

　　body>

　　h2>這是標題/h2>

　　p>這是內容/p>

　　/body>

　　/html>

　　從上面的代碼可以看出：

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

　　例如，head> 和 body> 的父節點是 html> 節點，文本節點“ 這是內容 ”的父節點是 p> 節點。

　　大部分元素節點都有子節點。

　　例如，head> 節點有一個子節點：title> 節點;title> 節點也有一個子節點：文本節點“ 這是標題 ”。

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

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

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

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

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

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

　　Javascript獲取DOM節點方法有什么

　　對DOM節點進行操作之前，首先要獲取DOM節點。

　　獲取DOM節點的方法有很多，可以根據 id屬性 、 標簽名稱 獲取，也可以獲取子節點、父輩節點、上個節點和下個節點。

　　本節講解根據HTML標簽的id屬性和標簽名稱來獲取節點。

　　getElementById( )方法

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

　　語法：

　　document.getElementById(id)

　　其中，id 為HTML標簽的 id 屬性。

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

　　document.getElementById("demo");

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

　　舉例，獲取幾個典型的元素節點：

　　div id="demo_div">我是 標簽/div>

　　p id="demo_p">我是

標簽/p>

　　h6 id="demo_h6">我是

標簽/h6>

　　script type="text/javascript">

　　function getNode(ele){

　　alert(

　　"獲取到的元素節點："+ele+"\n"+

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

　　"節點類型："+ele.nodeType+"\n"+

　　"文本內容："+ele.firstChild.nodeValue

　　);

　　}

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

　　getNode(this); // this 指向當前發生鼠標單擊事件的節點

　　}

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

　　getNode(this); // this 指向當前發生鼠標單擊事件的節點

　　}

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

　　getNode(this); // this 指向當前發生鼠標單擊事件的節點

　　}

　　/script>

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