温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Javascript中怎么获取DOM节点

发布时间:2021-07-06 17:00:53 来源:亿速云 阅读:128 作者:Leah 栏目:开发技术

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI