ParentNodes、childNodes、children之间的区别

"parentNode"

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

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

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

“children”

有些时候你发现调用childNodes属于没有获得你期望的值。比如:

html:

<a href="javascript:void(0);" onclick="selectCategory(‘1,this);">
                            <span>apple</span>
</a>

JS:

function selectCategory(val,obj){

var text = obj.children[0].innerHTML;

}

我们希望获得的text属性值为“apple”,但实际上的值是undefined,也就是说获取失败。

原因:

childNodes属性返回值包含了元素节点和文本节点,此例中obj.children[0]返回的实际是空格。

解决方案:

1)去掉<span>和<a>之间的空格。

2)改用 obj.children[0].innerHTML。children属性只返回元素节点。

"childNodes"

,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。

例子:

function setCount(count) {
var counts = count.split(",");
for (var i = 0; i < counts.length; i++) {
var j = i + 1;
document.getElementById(‘Text‘ + j).innerText = counts[i];
}
}
function setTable() {
var table = document.getElementById("bodyTb");
var n = 1
for (var i = 2; i <= 7; i++) {
var row = table.rows(i);
if (i == 3) {
for (var j = 2; j <= 14; j++) {
row.insertCell(j).innerHTML = " <span style=‘width:100%‘ id=‘Text" + n + "‘ ondblclick=‘EXCDWE(this)‘></span>";
n++;
}
}
else {
for (var j = 1; j <= 13; j++) {
row.insertCell(j).innerHTML = " <span style=‘width:100%‘ id=‘Text" + n + "‘ ondblclick=‘EXCDWE(this)‘></span>";
n++;
}
}
}
}

时间: 2024-10-05 07:59:22

ParentNodes、childNodes、children之间的区别的相关文章

Js中parentNode,parentElement,childNodes,children之间的区别

转载自  http://www.jb51.net/article/43730.htm parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合.

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

本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent"><b id="child">My text</b></div> 在上面的代码中, 你看

iOS 中 #import同@class之间的区别

很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢? 这是因为h文件在修改后,所有import该h文件的所有文件必须重 新build,因此,如果把#import写在h文件中,import该h文件的文件也就会产生不必要的编译,增加编译时间,特别是在项目文件多的情况 下.想象一下,如果只是修改一个h文件而导致上百个文件不必要的编译,那是一件多么让人纠结的事情.

外发外协外包三者之间的区别与联系

1.应当贯彻顾客为中心原则,通过建立体系来控制过程,确保产品质量.不要化精力在符合标准要求上.如果您 的目标.产品的要求不切合顾客要求的话,就是符合了ISO 9001标准要求,不能满足顾客要求的,符合顾客要求了,顾客满意了,不注意质量成本,经济效益,也就不一定能赚到钱的. 2.7.4条采购要求是,如果您从质量管理体系外得到各种影响产品要求符合性的资源(过程也作为一种资源)的话,就必须对这些产品或者活动(也就是过程) 加以控制的."采购"英文是purchasing,"外包过程&

socket,tcp,http三者之间的区别和原理

http.TCP/IP协议与socket之间的区别下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP.SMTP.SNMP.FTP.Telnet.SIP.SSH.NFS.RTSP.XMPP.Whois.ENRP 6 表示层 例如XDR.ASN.1.SMB.AFP.NCP 5 会话层 例如ASAP.TLS.SSH.ISO 8327 / CCITT X.225.RPC.NetBIOS.ASP.Winsock.BSD sockets 4 传输层 例如TC

Android培训准备资料之UI一些相似控件和控件一些相似属性之间的区别

这一篇博客主要收集五大布局中的一些相似控件和控件一些相似属性之间的区别 ImageView ImageButton Button 三者有啥区别? (1)Button继承自TextView,ImageView继承自View,ImageButton继承自ImageView                                              (2)Button支持android:text属性,而ImageButton和ImageView不支持,但是ImageView和ImageB

JavaScript中this和$(this)之间的区别

jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 以上的this为html元素即元素textbox,该元素有title属性,因此以上的程序没有错误.如

mysql 中execute、executeQuery和executeUpdate之间的区别

在用纯JSP做一个页面报警功能的时候习惯性的用executeQuery来执行SQL语句,结果执行update时就遇到问题,语句能执行,但返回结果出现问题,另外还忽略了executeUpdate的返回值不是结果集ResultSet,而是数值!特收藏如下一篇文章: JDBCTM中Statement接口提供的execute.executeQuery和executeUpdate之间的区别 Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和

VS中生成、清理项目、调试、开始执行(不调试)、Debug 和 Release等之间的区别

一.生成和重新生成 "生成"的时候只对你改动过的文件重新生成没有改动过的文件不会重新生成: "重新生成"是对所有的文件都重新生成. 以cpp为例当你只改动某些.cpp之类的文件的时候可以用生成省了编译没有改动的那些些文件的时间:但是改动了某些.h之类的文件最好用重新生成,因为有可能能有些文件包含.h文件也需要重新编译 选择生成或生成解决方案,将只编译自上次生成以来更改过的那些些项目文件和组件 注意 如果解决方案中包括多个项目,则生成命令将变成生成解决方案. 选择重新