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 相关文章推荐
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
Highcharts学习之数据列
Aug 03 Javascript
Angular 应用技巧总结
Sep 14 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
javascript实现放大镜功能
Dec 09 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php object转数组示例
2014/01/15 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Python jieba库分词模式实例用法
2021/01/13 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
运动会方阵解说词
2014/02/12 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
绿色出行口号
2014/06/18 职场文书
商场促销活动策划方案
2014/08/18 职场文书
会计人员演讲稿
2014/09/11 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
教师党员个人总结
2015/02/10 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
名人传读书笔记
2015/06/26 职场文书