javascript中parentNode,childNodes,children的应用详解


Posted in Javascript onDecember 17, 2013

"parentNode"

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

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

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

引用:

<div id="parent">
<b id="child">My text</b>
</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")? 很简单 ....

引用:

<div id="parent">
          <div id="childparent">
             <b id="child">My text</b>
          </div>
</div>
<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.

再??铝骄?
如果将 javascript 放在 html文件头部, 会发生错误. Firefox 会有如下报错:

document.getElementById("child") has no properties

而 IE 则是:

Object Required

原因是所有的支持 javascript 的浏览器在完全解析 DOM 之前运行 javascript . 在实际在 Web 编程中,可能会将大多数 javascript 放在 head 标签中. 为了能够正常运行, 需要在函数中包裹 alert , 在文档加载后调用函数. 例如在 Body 标签中加入 .

parentNode、parentElement,childNodes、children 它们有什么区别呢?
parentElement 获取对象层次中的父对象。
parentNode 获取文档层次中的父对象。
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children 获取作为对象直接后代的 DHTML 对象的集合。

--------------------------------------------------------

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

--------------------------------------------------------

也就是说parentElement、children是IE自家的东西,别的地方是不认的。
那么,他们的标准版就是parentNode,childNodes。
这两个的作用和parentElement、children是一样的,并且是标准的、通用的。

--------------------------------------------------------

以下是简单的解释,注意个别字的差异:
parentNode Property: Retrieves the parent object in the document hierarchy.

parentElement Property:Retrieves the parent object in the object hierarchy.

childNodes:
Retrieves a collection of HTML Elements and TextNode objects that are direct descendants of the specified object.

children:
Retrieves a collection of DHTML Objects that are direct descendants of the object.

parentElement parentNode.parentNode.childNodes用法例子

第一种方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" C>
<META NAME="Author" C>
<META NAME="Keywords" C>
<META NAME="Description" C>
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = -1;
function showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>";
if(row != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
row = rowIndex;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE id="tb">
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

第二种方法
<table border=1 width=100%>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i<inputObjs.length;i++)
{
   if(inputObjs[i ]==e) continue;
    inputObjs[i ].disabled=!e.checked;
}
}
</SCRIPT>

获取HTML中的父控件方法
function setvalue(v,o)
    { 
        //var obj=document.getElementById(''batchRate'');
        //windows.
        alert(o.parentNode.innerHTML);
        alert(o.parentNode); //parentNode此处也是获取父控件
        alert(o.parentElement); //parentElement此处也是获取父控件
        alert(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件
        //o.parentNode.bgColor="red";
         o.parentElement.parentNode.bgColor="red";
    }

实例:
<html>
<head>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title>新建网页 1</title>
</head>
<script>
    function setvalue(v,o)
    { 
        //var obj=document.getElementById(''batchRate'');
        //windows.
        alert(o.parentNode.innerHTML);
        alert(o.parentNode);
        alert(o.parentElement);
        //o.parentNode.bgColor="red";
       o.parentElement.parentNode.bgColor="red";
    }
</script>
<body>
<table border="1" width="100%" id="table1">
<tr>
<td width="250"><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>
Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
asm.js使用示例代码
Nov 28 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 #Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 #Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 #Javascript
js实现倒计时时钟的示例代码
Dec 17 #Javascript
B/S模式项目中常用的javascript汇总
Dec 17 #Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 #Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 #Javascript
You might like
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php单例模式示例分享
2015/02/12 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python实现最大优先队列
2019/08/29 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
酒店副总岗位职责
2013/12/24 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
安全目标责任书
2014/07/22 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python