前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JavaScript】获取对应的节点总结

【JavaScript】获取对应的节点总结

作者头像
游魂
发布2018-06-08 16:56:41
1.4K0
发布2018-06-08 16:56:41
举报
文章被收录于专栏:前端开发
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
<div id="dv">
  <ul id="uu">
    <li>第一个</li>
    <li>第二个</li>嘎嘎
    <li id="three">第三个</li>哈哈
    <li>第四个</li>
    <li>第五个</li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //ul的父级节点
  console.log(my$("uu").parentNode);
  //ul的父级元素
  console.log(my$("uu").parentElement);
  //ul的所有子级节点
  console.log(my$("uu").childNodes);
  //ul的所有的子元素
  console.log(my$("uu").children);
  //ul中第一个子节点
  console.log(my$("uu").firstChild);
  //ul中第一个子元素
  console.log(my$("uu").firstElementChild);
  //ul中最后一个子节点
  console.log(my$("uu").lastChild);
  //ul中最后一个子元素
  console.log(my$("uu").lastElementChild);
  //某个li的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个li的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个li的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个li的后一个兄弟元素
  console.log(my$("three").nextElementSibling);

  //总结:获取节点的代码,谷歌是获取节点,获取元素的代码,谷歌是获取元素
  //但是,到了IE8中,获取节点的代码是获取元素,获取元素的代码,不支持
</script>

</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-8-16 2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档