JS节点操作（1） - 父节点，子节点，兄弟节点
节点操作的作用
获取元素通常使用的两种方式：
1. 利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector() 等等
- 逻辑性不强，繁琐
2. 利用节点层级关系获取元素
- 利用父子兄弟节点关系获取元素
- 逻辑性墙，但是兼容性稍差
这两种方法都可以获取元素，但是节点操作更简单。
获取节点
1. 父节点
1.1 node.parentNode 返回的是距离最近的父节点
<body><div class="parent"><em class="child">JavaScript</em></div><script>var child = document.querySelector('.child');// 返回的是距离最近的父节点// 如果没有父节点则返回nullvar parent = child.parentNode;console.log(parent);</script>
</body>以上代码输出结果为：
返回了距离child最近的父节点。
2. 子节点
2.1 node.childNode 返回所有的子节点，包括所有的文本节点和元素节点
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 返回所有的子节点 包括所有的文本节点和元素节点var lis = parent.childNodes;console.log(lis);</script>
</body>以上代码输出结果为：
返回了包含文本节点在内的9个子节点。那么如果我们只想要元素节点怎么办呢？
2.2 node.children 返回所有子元素节点
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// children获取所有的子元素节点var lis = parent.children;console.log(lis);</script>
</body>以上代码输出结果为：
只返回了4个元素节点。
2.3 node.firstChild 和 node.lastChild 返回第一个和最后一个子节点，包括所有节点
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 获取第一个/最后一个子节点 包括所有的文本节点和元素节点console.log(parent.firstChild);console.log(parent.lastChild);</script>
</body>以上代码输出结果为：
返回了两个文本节点。那么如果我们只想要元素节点怎么办呢？
2.3 node.firstElementChild 和 node.lastElementChild 返回第一个和最后一个子元素节点，有兼容性问题
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 获取第一个/最后一个子元素节点 有兼容性问题，IE9以上才支持console.log(parent.firstElementChild);console.log(parent.lastElementChild);</script>
</body>以上代码输出结果为：
返回了第一个和最后一个子元素节点。然而这个方法有兼容性问题，IE9以上才支持。那么我们在日常开发中既想获取第一个和最后一个子元素节点又想兼顾兼容性，我们还有什么好办法呢？
2.4 开发中常用方法获取第一个和最后一个子元素节点
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 实际开发中 利用childrenconsole.log(parent.children[0]);console.log(parent.children[parent.children.length - 1]);</script>
</body>在实际开发中，我们可以运用children方法来返回第一个和最后一个子节点。
3. 兄弟节点
3.1 node.previousSibling 和 node.nextSibling 获取前一个和后一个兄弟节点，包括所有节点
<body><p>p</p><div class="div">div</div><span>span</span><script>var div = document.querySelector('div');// 获取兄弟节点-前一个/后一个节点 包含所有子节点// 找不到则返回nullconsole.log(div.nextSibling);console.log(div.previousSibling);</script>
</body>以上代码输出结果为：
返回了div的前一个和后一个文本节点。那么如果我们只想要获取元素节点怎么办呢？
3.2 node.previousElementSibling 和 node.nextElementSibling 获取前一个和后一个兄弟元素节点，有兼容性问题
<body><p>p</p><div class="div">div</div><span>span</span><script>var div = document.querySelector('div');// 获取兄弟节点-前一个/后一个元素节点 有兼容性问题// 找不到则返回nullconsole.log(div.nextElementSibling);console.log(div.previousElementSibling);</script>
</body>以上代码输出结果为：
返回了前一个和后一个元素节点。然而这个方法有兼容性问题，IE9以上才支持。那么我们在日常开发中既想获取前一个和后一个兄弟元素节点又想兼顾兼容性，我们还有什么好办法呢？
3.3 封装兼容性函数获取兄弟元素节点
以获取下一个元素节点为例：
<body><p>p</p><div class="div">div</div><span>span</span><script>var div = document.querySelector('div');// 封装兼容性函数function getNextElementSibling(ele) {while (ele = ele.nextSibling) {if (ele.nodeType === 1) {return ele;}}return null;}console.log(getNextElementSibling(div));</script>
</body>JS节点操作（1） - 父节点，子节点，兄弟节点相关推荐
- Jquery 寻找父、子、兄弟节点
JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$(" ...
- jquery兄弟标签_jQuery的父，子，兄弟节点查找方法
jQuery的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("s ...
- js获取对象的父元素,子元素,兄弟元素
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致[修改]做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮.现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生 ...
- JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(& ...
- 父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children(expr) //查找所有子元素,只会 ...
- JQuery获取父，子，兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- jquery兄弟标签_JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- js弹框带传值父窗口给子框_layer弹窗，父页面 子iframe 兄弟iframe之间传值，函数调用...
在这里记录下前端layer弹窗 父,子,兄弟弹窗 之间参数传递以及函数调用 ① [父-->子] [子-->父] 前言 //子弹窗给父页面元素赋值 parent.$("#paren ...
- React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能 拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
- JavaScript文档对象模型DOM节点操作之父节点和子节点（2）
1.父节点 示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
最新文章
- 调用jsapi缺少参数appid_【Python学习笔记】18、函数的参数关键字参数
- [P1363] 幻想迷宫
- 织梦cms系统如何code 财付通接口
- SpringCloud之五大组件
- 两个相邻时间之间的差值计算
- Visual Studio Code / 开启自检文本编码方式的方法
- android 简单的音乐播放器
- tp3.2 复合查询
- 车刀 matlab,可转位车刀的结构
- Thinking In Design Pattern——Unit Of Work（工作单元）模式探索
- Akka源码分析-Akka Typed
- C# 图片exif信息
- 详细解说Java 技术的新纪元
- 华中科技大计算机第八次基础作业,华中科技大计算机基础第三次作业.doc
- html超链接下划线改虚线_怎么把下划线变成虚线
- Vue学习记录（三）——脚手架的使用和Vuex
- 9.1 交易数据的存储
- Android攻城狮 Handler与子线程
- 计算机中毒症状简介,电脑中毒的八大表现，第五个大多数人都不知道！
- 培训材料设计之 夏虫不可语以冰