父、子节点操作、兄弟节点

1、节点概述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点概述</title>
</head><body><!-- 节点的优点 --><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div class="box"><span class="erweima">×</span></div><script>var box = document.querySelector('.box');console.dir(box);</script>
</body></html>

2、父节点操作

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>父节点操作</title>
</head><body><!-- 节点的优点 --><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div class="demo"><div class="box"><span class="erweima">×</span></div></div><script>// 1. 父节点 parentNodevar erweima = document.querySelector('.erweima');// var box = document.querySelector('.box');// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 nullconsole.log(erweima.parentNode);</script>
</body></html>

3、子节点操作

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>子节点操作</title>
</head><body><!-- 节点的优点 --><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><ol><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ol><div class="demo"><div class="box"><span class="erweima">×</span></div></div><script>// DOM 提供的方法（API）获取var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');// 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType);console.log(ul.childNodes[1].nodeType);// 2. children 获取所有的子元素节点 也是我们实际开发常用的console.log(ul.children);</script>
</body></html>

4、子节点-第一个子元素和最后一个子元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>子节点-第一个子元素和最后一个子元素</title>
</head><body><ol><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li><li>我是li5</li></ol><script>var ol = document.querySelector('ol');// 1. firstChild 第一个子节点 不管是文本节点还是元素节点console.log(ol.firstChild);console.log(ol.lastChild);// 2. firstElementChild 返回第一个子元素节点 ie9才支持console.log(ol.firstElementChild);console.log(ol.lastElementChild);// 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素console.log(ol.children[0]);console.log(ol.children[ol.children.length - 1]);</script>
</body></html>

JavaScript里的父、子节点操作源码解析相关推荐

【特征匹配】BRIEF特征描述子原理及源码解析
相关:Fast原理及源码解析 Harris原理及源码解析 SIFT原理及源码解析 SURF原理及源码解析转载请注明出处: http://blog.csdn.net/luoshixian099/art ...
JavaScript数字运算必备库——big.js源码解析
概述在我们常见的JavaScript数字运算中,小数和大数都是会让我们比较头疼的两个数据类型. 在大数运算中,由于number类型的数字长度限制,我们经常会遇到超出范围的情况.比如在我们传递Long ...
JavaScript | 益智类数字棋牌小游戏，无游戏框架，浏览器直接运行JavaScript（js）小游戏【源码+解析】
游戏界面曾几何时想有一款自己编写的游戏,通过不断学习,终于掌握了一点JavaScript基础,捣鼓了一个益智类的数字棋牌游戏,没有使用任何游戏框架,就简单使用HTML做布局,CSS做动画,JavaS ...
[源码解析] PyTorch分布式优化器(1)----基石篇
[源码解析] PyTorch分布式优化器(1)----基石篇文章目录 [源码解析] PyTorch分布式优化器(1)----基石篇 0x00 摘要 0x01 从问题出发 1.1 示例 1.2 问题点 ...
PCA-SIFT原理及源码解析
相关: SIFT原理与源码解析 SURF原理与源码解析 ORB原理与源码解析 FAST原理与源码解析 BRIEF描述子原理与源码解析 Harris原理与源码解析转载请注明出处:http://blog ...
Android 图片加载框架Gilde源码解析
1.使用Gilde显示一张图片 Glide.with(this).load("https://cn.bing.com/sa/simg/hpb/xxx.jpg").into(imag ...
【特征匹配】ORB原理与源码解析
相关 : Fast原理与源码解析 Brief描述子原理与源码解析 Harris原理与源码解析 http://blog.csdn.net/luoshixian099/article/details/48 ...
shiro反序列化工具_Apache Shiro 1.2.4反序列化漏洞（CVE-2016-4437）源码解析
Apache Shiro Apache Shiro是一个功能强大且灵活的开源安全框架,主要功能包括用户认证.授权.会话管理以及加密.在了解该漏洞之前,建议学习下Apache Shiro是怎么使用. d ...
JavaScript实现prim普里姆算法（附完整源码）
JavaScript实现prim普里姆算法(附完整源码) Comparator.js完整源代码 Heap.js完整源代码 MinHeap.js完整源代码 PriorityQueue.js完整源代码 G ...

JavaScript里的父、子节点操作源码解析

父、子节点操作、兄弟节点

1、节点概述

2、父节点操作

3、子节点操作

4、子节点-第一个子元素和最后一个子元素

JavaScript里的父、子节点操作源码解析相关推荐

最新文章

热门文章