javascript中parentNode,childNodes,children的应用详解
"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>
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>
相关推荐
-
js判断一个元素是否为另一个元素的子元素的代码
当然方法有很多,不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一. 废话少说直接上方法: 复制代码 代码如下: function isParent (obj,parentObj){ while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){ if (obj == parentObj){ return true; } obj = obj.parentN
-
js与jquery获取父元素,删除子元素的两种不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法 for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法 $("#id").each
-
Js中parentNode,parentElement,childNodes,children之间的区别
parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的父对象. childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合. children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是
-
js遍历子节点子元素附属性及方法
复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod
-
JavaScript操作DOM元素的childNodes和children区别
对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</
-
Javascript中找到子元素在父元素内相对位置的代码
经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')
-
JS中用childNodes获取子元素换行会产生一个子元素
JS中用childNodes获取子元素换行会产生一个子元素 <div id='div1'> <div id='div2'> <div id='div3'></div> </div> <div class='div2'> </div> </div> 这样的代码 $('#div1').childNodes.length==>会等于 5哦 要是你把这些代码不换行你就会得到2 $('#div1').childNo
-
javascript中parentNode,childNodes,children的应用详解
"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementBy
-
在JavaScript中对HTML进行反转义详解
在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI).encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别. 但是如何在JavaScript中对HTML进行反转义操作呢?例如下面这段代码: var jsonData = { title: "<%= data.name? data.name : title %>", desc: "<%= da
-
JavaScript 中有关数组对象的方法(详解)
JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .
-
Javascript中的迭代、归并方法详解
迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的函数,如果每项都返回true,那么就会返回true filter() 对数组中的每一个项运用给定的函数,把返回true的项组成一个新数组并返回 forEach() 对数组中的每一项运用给定的函数,但是没有任何的返回值 map() 对数组中的每一个项运用给定的函数并返回每次函数调用的结果组成新的数组
-
JavaScript中SetInterval与setTimeout的用法详解
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数
-
JavaScript中闭包的写法和作用详解
1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变
-
JavaScript中Number对象的toFixed() 方法详解
定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 参数 描述 num 必需.规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围.如果省略了该参数,将用 0 代替. 返回值 返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字.如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度.如果 num 大于 l
-
JavaScript中关键字 in 的使用方法详解
for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q
-
javascript中href和replace的比较(详解)
在使用javascript的时候,有时候对于经常使用的方法太熟悉而忽略了他们之间原理的细微差别. 举例如下: window.location.href,window.location.replace. 这两种方式都可以让页面跳转到一个新的页面,但是其中我就忽略了跳转之后的细节,比如返回的原来的页面. window.location.href中的href其实就是<a>标签中的href,使用这个进行页面跳转后,可以使用浏览器的后退按钮退回到原来的页面,也可以使用history.go(-1)函数跳转
-
JavaScript中object和Object的区别(详解)
JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 这个问题和我之前遇到的问题非常相似,我认为这里有两个问题需要解决,一个是运算符new的作用机制,一个是function关键字和Funtion内置对象之间的区别.看了一些前辈的博客和标准,这里帮提问者总结一下. 1.new new运算符的作用是创建一个对象实例.这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象.如果 new