浅谈js的html元素的父节点,子节点
作者：jingxian 发布时间：2024-04-23 09:31:56
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
0
投稿猜你喜欢
原文：http://research.microsoft.com/~helenw/papers/subspace.pdfwindow.nam- 编辑注：在Review别人的JavaScript代码时曾看到过类似的队列函数，不太理解，原来这个是为了保证函数按顺序调用。读了这篇文章之后，
- 本文实例为大家分享了python图书管理系统的具体代码，供大家参考，具体内容如下"""图书管理系统"
- abs()返回一个数字的绝对值，它的参数可以是整数或者浮点数。举个例子：all()参数为一个可迭代对象，如果该可迭代对象所有元素的真值都为T
- 结合工作中的内容和大家分享一次Left Jon优化的过程，希望能给同学们新的思路。【功能背景】 我们需要
- Math.abs(x):可返回数的绝对值Math.ceil(x):向上取整Math.floor(x):向下取整Math.max(x,y):最
- 前言本文通过一个小范例来学习java中通过正则表达式如何获得一个字符串中的数字，下面话不多说，来看看详细的介绍吧。示例代码如下：import
- 海豚本文例子主要展示了如何使用补丁、路径和转换类绘制和操作给定的顶点和节点的形状。测试可用。import matplotlib.cm as
- 前言由与上不了学，教我们Mastercam的老师提前给我们布置了4道习题。对我们太好了，谢谢老师�没办法，干就完了。只是要求附上制作过程视频
- 结构图:为什么？var data [][]intfor _, rangeSlice := range [][]int{{1}, {2}, {
- 一、前言对很多人来说，将PDF转换为可编辑的文本是个刚需，却苦于没有简单的方法。发现 pdf 幻灯片，效果还不错。传统的讲座通常伴随有很多p
- ThreadLocal在threading模块中，可以见得它是为我们的线程服务的。它的主要作用是存储当前线程的变量，各个线程之间的变量名是可
- CKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、
- Python最近挺火呀，比鹿晗薛之谦还要火，当然是在程序员之间。下面我们看看有关Python的相关内容。上一篇文章我们已经介绍了部分Pyth
- 当使用桌面应用程序的时候，有没有那么一瞬间，想学习一下桌面应用程序开发？建议此次课程大家稍作了解不要浪费太多时间，因为没有哪家公司会招聘以为
- 引言 本文通过python3、第三方python库Selenium和谷歌浏览器Chrome，完成WPS表单的自动填写。开发环境配置 py
- pyautogui是一个可以控制鼠标和键盘的python库，类似的还有pywin32。pyautogui的安装pip3 install py
- 本文实例为大家分享了vue组件实现可搜索下拉框的具体代码，供大家参考，具体内容如下一、效果二、代码dropdown-ext.vue<t
- 1. sys 模块Python 中的 sys 模块具有 argv 功能。当通过终端触发 main.py 的执行时，此功能将返回提供给 mai
- 如下所示：#!/usr/bin/env python# -*- coding: utf-8
