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 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
jquery的live使用注意事项
Feb 18 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
对node.js中render和send的用法详解
May 14 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php并发加锁示例
2016/10/17 PHP
页面中js执行顺序
2009/11/09 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
babel基本使用详解
2017/02/17 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
js实现随机圆与矩形功能
2020/10/29 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
使用Python生成url短链接的方法
2015/05/04 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python中 * 的用法详解
2019/07/10 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
python 如何设置守护进程
2020/10/29 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
教师演讲稿范文
2014/01/08 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
指导教师推荐意见
2015/06/05 职场文书
python pyhs2 的安装操作
2021/04/07 Python