js中12种获取节点和元素的方法

最新推荐文章于 2023-12-14 11:11:59 发布

ヽ错落不堪的年华。

最新推荐文章于 2023-12-14 11:11:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术交流前端技术总结文章标签： js节点节点获取 javascript js 前端

本文链接：https://blog.youkuaiyun.com/qq_44777678/article/details/89920630

技术交流同时被 3 个专栏收录

107 篇文章

订阅专栏

技术总结

103 篇文章

订阅专栏

前端

97 篇文章

订阅专栏

博客总结了不同浏览器下JS获取节点和元素的情况。在谷歌和火狐中，获取节点代码得到相关节点，获取元素代码得到相关元素；而在IE8中，从子节点和兄弟节点开始，获取节点代码得到元素，获取元素代码得到undefined，IE不支持相关元素代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  //父级节点
  console.log(对象名.parentNode);
  //父级元素
  console.log(对象名.parentElement);
  //子节点
  console.log(对象名.childNodes);
  //子元素
  console.log(对象名.children);
  console.log("==============================================");
  //第一个子节点
  console.log(对象名.firstChild);//------------------------IE8中是第一个子元素
  //第一个子元素
  console.log(对象名.firstElementChild);//-----------------IE8中不支持
  //最后一个子节点
  console.log(对象名.lastChild);//------------------------IE8中是第一个子元素
  //最后一个子元素
  console.log(对象名.lastElementChild);//-----------------IE8中不支持
  //某个元素的前一个兄弟节点
  console.log(对象名.previousSibling);
  //某个元素的前一个兄弟元素
  console.log(对象名.previousElementSibling);
  //某个元素的后一个兄弟节点
  console.log(对象名.nextSibling);
  //某个元素的后一个兄弟元素
  console.log(对象名.nextElementSibling);

总结:凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持