浅谈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实现背景图片切换效果代码
Nov 14 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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验证码类实例分享
2013/12/27 PHP
php检查页面是否被百度收录
2015/10/28 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python查看模块,对象的函数方法
2018/10/16 Python
python实现简单图书管理系统
2019/11/22 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
群众路线剖析材料
2014/02/02 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
活动总结新闻稿
2014/08/30 职场文书
运动会5000米加油稿
2015/07/21 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
SQL写法--行行比较
2021/08/23 SQL Server