【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 条评论
登录 后参与评论

相关文章

来自专栏一直在跳坑然后爬坑

如何通过自定义View方式模拟SVG并实现动画

3.然后我们要进行对五角星动画的裁剪,涉及到的方法是PathMeasure的getLength和getSegment方法,getLength()不用多说,就是用...

951
来自专栏对角另一面

读Zepto源码之样式操作

这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版...

2330
来自专栏Golang语言社区

深入剖析Go语言编程中switch语句的使用

switch语句可以让一个变量对反对值的列表平等进行测试。每个值被称为一个的情况(case),变量被接通检查每个开关盒(switch case)。 在Go编程,...

3577
来自专栏进击的君君的前端之路

firstElementChild、firstChild 、childNodes和children方法

1202
来自专栏我的小碗汤

Go语言中数组和切片笔记

今天有位大佬问我一个关于切片很简单的一个问题,却把我难住了,所以是时候了解下切片的底层了。

893
来自专栏飞雪无情的博客

Go语言实战笔记(五)| Go 切片

切片也是一种数据结构,它和数组非常相似,因为他是围绕动态数组的概念设计的,可以按需自动改变大小,使用这种结构,可以更方便的管理和使用数据集合。

1054
来自专栏Python

JavaScript基础

一 JavaScript的基础 1.1 JS的引入方式 1 直接编写 <script> alert('hello yuan') ...

2208
来自专栏marsggbo

jquery的html,text,val

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 这三个方法功能...

1925
来自专栏咸鱼不闲

jsoup爬虫工具的简单使用

解决方案: 1.通过url 获得doucment对象, 2.调用select()等方法获得Elements对象, 3.调用.text()等方法,获得自己想要的内...

3134
来自专栏Golang语言社区

Golang语言社区--标准库strings包讲解

大家好,我是Golang语言社区主编彬哥,本篇文章是给大家转载关于标准库strings包的知识。

90316

扫码关注云+社区