【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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

可视化格式模型-clear特性

‘clear’特性 该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatt...

1766
来自专栏IMWeb前端团队

滚动,你真的懂了吗

在业务中,页面滚动的场景十分常见, 因此对于滚动的充分了解,可以让我们提高开发的效率! 滚动的几种场景 只有window窗体滚动 内滚动布局 窗体滚动+DIV内...

1907
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

2765
来自专栏海天一树

小朋友学Python(30):实现带UI的简易计算器(下)

一、最终效果 ? 8.png 二、完整程序 import tkinter #导入tkinter模块 #定义数值 w = 280 ...

36510
来自专栏前端布道

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { ...

3527
来自专栏互联网开发者交流社区

css多浏览常见问题

783
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

18210
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

832
来自专栏编程心路

Bootstrap学习文档(二)

Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 ...

1045
来自专栏smy

pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系

如图: css宽度:1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度:1250  不包含滚动条宽度 缩放浏览器右上角显示的宽度:1267 包含了...

2886

扫码关注云+社区