章节
问答
课签
笔记
评论
占位
占位

访问子节点childNodes

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:

elementNode.childNodes

注意:

如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:

运行结果:

IE:

  UL子节点个数:3
  节点类型:1

其它浏览器:

   UL子节点个数:7
   节点类型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:

如果把代码改成这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:(IE和其它浏览器结果是一样的)

  UL子节点个数:3
  节点类型:1

 

任务

试一试,在script标签内,获取子节点,并输出相应属性。

1. 获取第一个DIV的子节点。

2. 使用for遍历每个节点。

3. 输出相应节点的属性。

注意: 输出内容可能和想的内容不同,想想为什么。

 

?不会了怎么办

1. 使用getElementsByTagName与childNodes

2. 因为获取的孩子节点是一个数组,所以使用for循环。

3. 输出节点属性,nodeName、nodeType、nodeValue。

var x=document.getElementsByTagName("div")[0].childNodes;
for(i=0;i<x.length;i++){
document.write("节点类型:"+x[i].nodeName+x[i].nodeType+x[i].nodeValue+"<br>");}
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 没枪的射手
<...code...>返回的是一个数组,[0]就是数组里的第一个值

最新回答 / 慕娘0441064
for循环里的i得定义var i=0

最赞回答 / 慕莱坞7274024
getElementsByTagName("div")是获取文档中所有的div元素  意数组的形式返回 获取第一个div 用getElementsByTagName("div")[0]  要获取第二个div的话就是getElementsByTagName("div")[1]

已采纳回答 / qq_慕九州6342324
有值 不过是符号(换行符 空格 缩进符之类的) 看不见 

最新回答 / 小何家的徐宝宝
更为准确的说,[object Text]是文本节点,不论是无内容的空白文本还是有内容的非空白文本,都算是文本。在<div>与<p>标签之间,就是一个文本节点,代码示例中的该文本节点内容为“javascript”,比如你在“javascript”前后增加文字或删除文字,只要是在标签之间,均作为一个文本节点存在,你更改的仅仅是该文本节点的nodeValue,并不会新增或减少节点。

已采纳回答 / weixin_慕圣6135196
你是感觉这个有点难就想跳了吧  建议你好好学

最新回答 / 炳烛之华
div的子节点数为:7第1个节点;---#text--- javascript ---3第2个节点;---P---null---1第3个节点;---#text--- ---3第4个节点;---DIV---null---1第5个节点;---#text--- ---3第6个节点;---H5---null---1第7个节点;---#text--- ---3为什么5和7没有值呢?

最赞回答 / 初学小小白
 for(var i=0;i<a.length;i++){     document.write("第"+(i+1)"个子节点的值是:"+a[i].nodeValue+"<br />");粗心了,少了个+号:for(var i=0;i<a.length;i++){     document.write("第"+(i+1)+"个子节点的值是:"+a[i].nodeValue+"<br />");

最新回答 / 慕码人9569303
解决了,是因为输出的时候应该要写成childN[i]才对

最赞回答 / 哎哎哎没办法
我怎么感觉好多人都不看课程说明部分的。。。注意里写的清清楚楚,如果你用chrome、firefox,会把空白算成文本元素#text。。。。

最赞回答 / 金刚无敌葫芦娃
document.getElementsByTagName("div")的意思是,获取了所有的div存在一个数组[0]是选择了第一个div,即最外面的那个div.childNodes是获取子节点,意思是最外面的div包含的子节点主要是通过getElementsByTagName获取到的是个数组,如果给第一个div加个id=“div”,然后使用getElementById,就可以写成var d = document.getElementById("div").childNodes;

已采纳回答 / 秋之枫华
“name”是JavaScript语言内置的属性,在给变量或者函数命名时,请不要使用“name”<...图片...>另外,还有一部分关键字和保留字,也是不可以在命名时使用,否则会报错。或者即使不报错,也会出现意想不到的结果,详见:https://www.runoob.com/js/js-reserved.html如果帮到了你,望采纳!

最新回答 / 晓之蛇
节点有3个重要属性:nodeName : 节点的名称、nodeValue :节点的值和nodeType :节点的类型都输出的话for循环中可改为:<...code...>注:除IE浏览器外,其他浏览器不会忽略节点间生成的空白文本节点(例如,换行符号)
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言