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节点就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。