浅谈js的html元素的父节点,子节点


Posted in Javascript onAugust 06, 2016

parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持

示例:

"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下:

<div id="parent">
<b id="child">My text</b>
</div>

在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementById() 方法获取粗体元素并且想知道它"爹"是谁, 返回的信息将是一个 div. 演示下面的脚本如下:

<script type="text/javascript">
<!--

alert(document.getElementById"child").parentNode.nodeName);

//-->
</script>

用 parentNode 不一定只找到一个"爹", "儿子"也可以成为"爹", 如下面的例子 ...

<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>

上面这段代码中有两个"爹"和两个"孩子". 头一个 div ( id "parent") 是第二个 div (childparent) 的"爹".   在 "childparent" 中有个粗体元素(id "child"), 是 "childparent" div 的"孩子". 那么, 如何访问到"爷爷" (id "parent")?如下:

<script type="text/javascript">
<!--

alert(document.getElementById("child").parentNode.parentNode.nodeName);


//-->
</script>

注意到两个 parentNode 连用了吗? "parentNode.parentNode". 第一个 parentNode 是 div ( id "childparent"), 因为我们要得到最外层的父元素, 所以另外加了一个 parentNode 就到了 div ( id "parent").

使用 parentNode 不只找到某个元素的 nodeName, 还会更多. 例如, 你可以获取包含大量元素的父节点, 并在末尾添加一个新的节点.   IE 有它自己的名称叫做 "parentElement", 对于交叉浏览器脚本建议使用 parentNode

以上这篇浅谈js的html元素的父节点,子节点就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js函数调用常用方法详解
Dec 03 Javascript
js 窗口抖动示例
Sep 04 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
javascript中的隐式调用
Feb 10 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
Google 地图获取API Key详细教程
Aug 06 #Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 #Javascript
深入理解JS DOM事件机制
Aug 06 #Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 #Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 #Javascript
You might like
php 无限级 SelectTree 类
2009/05/19 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JavaScript闭包详解
2015/02/02 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
python中的字典详细介绍
2014/09/18 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python主要用于哪些方向
2020/07/05 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
八年级历史教学反思
2014/01/10 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
毕业典礼主持词
2015/06/29 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
php微信小程序解包过程实例详解
2021/03/31 PHP
CSS 伪元素::marker详解
2021/06/26 HTML / CSS