一、获取父级节点

node.parentNode

代码如下（示例）：

<!DOCTYPE html>
<head>父节点操作</head>
<body><div class="box"><span class="hang"></span></div>
</body>
<script>//获取父节点var hang = document.querySelector('.hang');//var box = document.querySelector('.box');var box = hang.parentNode;console.log(box);
</script>
</html>

（1）在控制台可以看到，我们已经获取了span标签的父级节点.box

（2）需要注意的是node.parentNode只能获取离元素最近的父级节点 (亲父亲)，如果找不到父节点就返回为null

<body><div class="demo"><div class="box"><span class="hang"></span></div></div></body>
<script>//获取父节点var hang = document.querySelector('.hang');//var box = document.querySelector('.box');var box = hang.parentNode;console.log(box);
</script>

我在.box盒子外面再加一层.demo盒子， hang.parentNode获取的依旧是.box这个盒子

二、获取子节点

1、获取子节点

parentnode.children

代码如下（示例）：

<!DOCTYPE html><head>子节点操作</head><body><div class="demo"><ul><li>01</li><li>02</li><li>03</li><li>04</li></ul></div>
</body>
<script>/*//DOM提供的方法（API）获取var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');*///获取子节点  var ul = document.querySelector('ul');console.log(ul.children);
</script></html>

在控制台可以看到，我们已经获取了ul标签下的所有小li

2、获取指定子节点

1、获取第一个子元素节点

parentnode.firstElementChild

2、获取最后一个子元素节点

parentnode.lastElementChild

代码如下：

<script>//获取子节点  var ul = document.querySelector('ul');console.log(ul.firstElementChild);     //获取第一个console.log(ul.lastElementChild);     //获取最后一个
</script>

（注意：这个方法存在兼容性问题，IE9以上才支持）

3、常用的写法

parentnode.children[i]; //任意一个
parentnode.children[0]; //第一个
parentnode.children[ parentnode.children.length-1]; //最后一个

代码如下：

<script>//获取子节点  var ul = document.querySelector('ul');console.log(ul.children[0]);console.log(ul.children[1]);console.log(ul.children[ul.children.length - 1]);
</script>

三、总结

以上就是今天要讲的内容，简单介绍了如何获取父节点和子节点！

# 如何获取父节点和子节点相关推荐

总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码获取父节点及父节点下所有子节点(兄弟节点) <ul><li ...
JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
jquery兄弟标签_jQuery获取父级、兄弟节点的方法
原标题:jQuery获取父级.兄弟节点的方法一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以n ...
【Groovy】自定义 Xml 生成器 BuilderSupport ( setParent 方法中设置父节点与子节点关系 )
文章目录一.setParent 方法中设置父节点与子节点关系二.完整代码示例 1.MyBuilderSupport 生成器代码 2.使用 MyBuilderSupport 生成器创建 Xml 代码 ...
如何通过递归找父节点或子节点详解
前言:如何通过递归去查询父节点或子节点,相信大家在平常肯定会遇到这样的需求,这一章我们就好好研究下如何用递归去找. 目录一.递归找父节点或子节点二.创建一张表关系表保存上面的关系三.递归查询父节 ...
ztree 获取当前选中节点的子节点集合
功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...
Javacript中父节点、子节点、兄节点的简单用法[0306]
Javacript中父节点.子节点.兄节点的简单用法[0306] 一.开解: 本文主要讲父子兄节点的简单用法,至于怎么取得节点,可以参考文[0301]和[0302],视情况而定,有时候我们分别会用到父 ...
js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)
原生javascript方法: 1 var a = document.getElementById("dom"); 2 del_space(a); //清理空格 3 var b = ...
数据结构-树：根节点、子节点、叶子节点是什么？
前言:这个属于数据结构:树. 下面给个例子图解释(根节点.子节点.叶子节点). 上图数字 1.3.7是叶子节点:(因为他们下面没有分叉出子节点,所以称为:叶子节点)[度为0] 数字2.8是子节点: ( ...

# 如何获取父节点和子节点

文章目录