这篇文章给大家介绍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">我是
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节点就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。