浅谈js的html元素的父节点,子节点
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元素的父节点,子节点就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于js实现逐步显示文字输出代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了如何利用JavaScript 实现继承，JavaScript 在编程语言界是个特殊种类，它和其他编程语言很不一样，JavaScript可以在运行的时候动态地改变某个变量的类型,下面小编将继续介绍JavaScript如何实现继承,需要的朋友可以参考下2022-02-02
下面小编就为大家带来一篇无限循环轮播图之运动框架(原生JS实现)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了JavaScript中的异常捕捉介绍,本文讲解了throw语句抛出异常,try/catch/finally语句捕捉异常,需要的朋友可以参考下2014-12-12
本文是对javascript中的垃圾收集机制与内存泄漏进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
在使用UniApp开发中,通过WebView组件加载本地网页时,往往会遇到跨域问题,下面这篇文章主要介绍了UniApp WebView页面中的请求跨域问题解决的相关资料,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了技术男用来对妹子表白的百度首页,非常有创意、有意思,需要的朋友可以参考下2014-07-07
这篇文章主要给大家介绍了关于ES6小技巧之代替lodash的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
下面小编就为大家带来一篇JavaScript中Require调用js的实例分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了详解es6超好用的语法糖Decorator，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论