javaScript中childNodes、children的用法几则

最新推荐文章于 2022-10-01 23:52:47 发布
原创 最新推荐文章于 2022-10-01 23:52:47 发布 · 673 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #HTML #ViewUI

本文通过一个具体的HTML页面示例，展示了如何使用JavaScript的DOM接口来获取页面中的元素及其属性。通过对页面元素的操作，如获取子节点、访问特定标签等，详细解释了childNodes和children的区别，并演示了如何遍历和筛选节点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>childNodes Method Test</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>


<BODy onLoad="aaa();">
<div id="tupian"><table cellpadding="0" cellspacing="1" border="0" width="100%" id="table1">
<tr id="tr1">
<td id="td1">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景" id="1">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
<p id='p123'>
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景3" id="2">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
</p>
</td>

<td id="td2">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="桃花源实景图例2">
<span>123</span>
<span>222</span>
</a>
</td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aaa(){
// alert(document.all['tupian'].childNodes[0].id); //用childNodes取得div子标签对象id
var h = document.all['tupian'].childNodes[0]; //取得id为“tupian”的div子对象
// alert(h.rows[0].id); //取得table的行[0]id
// alert(h.rows[0].childNodes[0].id);
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].src); //第一行第一列A标签下的IMG标签src
// var l = h.rows[0].cells[0].childNodes.length; //childNodes中间有两个并列的双标记标签时，可用childNodes[i]取得对象
// for(var i=0;i<l;i++){
// alert(i);
// alert(h.rows[0].cells[0].childNodes[i].tagName);
// }
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].tagName); //取IMG的tagname
// alert(h.rows[0].cells[1].id); //第一行第二列ID
var w =h.rows[0].cells[1].childNodes[0].childNodes.length; //children和childNodes区别:children只取HTML，它者取HTML和包含文本innerHTML;
alert(w);
alert(h.rows[0].cells[1].childNodes[0].tagName);
for(var j=0;j<w;j++){
alert(j);
alert(h.rows[0].cells[1].childNodes[0].childNodes[j].tagName);
}
}
//上述打出的tagName有4个，因为有\t或者回车或者空格等元素存在。childNodes是会将这些元素读取进去。如果是一行则正确。
//在DOM中childNodes共5个节点类型：Element，Text，Attr，Comment，CDATASection。可用childNodes[i].nodeType == ELEMENT 对childNodes进行过滤.
//如果将childNodes[j]替换成children就不会出现这些问题。
//-->
</SCRIPT>
</BODY>
</HTML>
12揭秘前端 DOM！childNodes与children属性全解析及兼容性秘籍
前端基地
05-21 874
想深入了解前端 DOM 操作？本文详细剖析childNodes和children属性，从语法、特点到示例代码，展示它们在高低版本浏览器中的差异。还介绍了兼容性封装策略，通过函数实现子元素节点筛选，助力你攻克前端兼容性难题，提升开发能力💪。
JavaScript使用childNodes和children
JOKER0707的博客
02-08 716
　　childNodes用来获取一个元素的所有子元素，这个包括元素节点和文本节点。 　　children用来获取一个元素的子元素节点，注意只是元素节点 其中DOM中常见的三种节点分别如下： 　　元素节点：<body>，<p>，<a>，<div>，<head>.....等等这些标签，都是元素节点 　　属性节点：title，...
childNodes 用法两例
12-10
第一： New Document [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]第二： 1111 1111 1111 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
childNodes用法两例
04-14 886
 第一：            New Document var row = -1;function showEdit(obj){ var cell2 = obj.parentNode.parentNode.childNodes[1]; var rowIndex = obj.parentNode.parentNode.rowIndex; cell2.innerHTML = ""; if(ro
js中childNodes易错点、详解定义以及用法
君莫笑
09-13 7121
js中childNodes易错点、详解定义以及用法 最近学习的时候，我遇到了childNodes的一些问题，我查阅了一些资料，总结一下其定义及用法。在学习childNodes之前，我们需要先了解一下DOM。 　　 DOM：文档对象模型，描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。如下图文档对象模型图册所示： 　它包括5种节点类型如下： 节点类型 说明 值
Javascript childNodes用法
angleretar的专栏
07-15 2359
//定义函数getInfo()，用于获取小节的详细信息 function getInfo(){ //使用getElementById()方法获取元素以及元素 var list = document.getElementById("list"); //使用childNodes数组导航到相应的小节 var node = list.childNodes; alert(node.
JavaScript操作DOM元素的childNodes和children区别
10-24
在JavaScript中，可以使用多种属性和方法来访问这些节点，其中就包括childNodes和children。 1. childNodes属性： childNodes属性返回指定元素的所有子节点，这包括元素节点、文本节点、注释节点等。在DOM树中，...
深入解析JavaScript中parentNode, childNodes, children的用法及其层次关系
在JavaScript中，`parentNode`, `childNodes`, 和 `children` 是三种用于处理DOM（文档对象模型）节点关系的关键概念，它们在操作HTML元素时非常实用。这些属性主要用于导航和定位元素在DOM树中的位置。 1. ...
JavaScript中parentNode,childNodes,children属性深度解析
在JavaScript中，DOM（文档对象模型）提供了对HTML或XML文档结构进行操作的方法。`parentNode`, `childNodes`和`children`是三个非常重要的属性，它们帮助我们理解和操作元素之间的关系。 1. `parentNode` `...
Js中parentNode,parentElement,childNodes,children之间的区别
12-02
这段代码在IE浏览器中使用`element.children`，而在其他浏览器中，通过转换`childNodes`并筛选出元素节点来达到同样的效果。 总结来说，`parentNode`和`childNodes`是更通用、跨浏览器的属性，遵循W3C DOM标准，而`...
childNodes属性使用
君林天下的专栏
03-08 1716
/*打印当前页面元素树结构 递归 ** childNodes属性获得当前对象的子元素节点 */ var s=""; function travel(space,node){ if(node.tagName){ s+=(space+node.tagName+""); } var l = node.childNodes.length; for(var i=0;i<l;i++){ tr
js子节点children和childnodes的用法
weixin_30342209的博客
05-03 496
想要获取子节点的数量，有几种办法。 childNodes 它会把空的文本节点当成节点， <ul> 文本节点 <li>元素节点</li> 文本节点 <li>元素节点</li> 文本节点 </ul> 所以childNodes.length就是5 而另一种方法 Children ...
JS——DOM操作（childNodes、nodeType和children区别与用法）
weixin_30545285的博客
05-25 905
DOM中节点的类型 DOM中一共有12中类型。但是我们常用的只有几种。 首先我们了解下DOM中一般常见的节点类型有哪些？ 1、元素节点 DOM中的原子都是元素节点，比如<body><table><div>等等。 如果把Web上的文档比作一座大厦，则元素就是构成这块大厦的砖石。一个文档是由N个元素组成的。元素可包含其他元素。 2、文本节点 任意的文字...
childnodes与children详解
chenqingmiaomiao的专栏
02-14 1304
childNodes与children的区别与详解(包括自己的项目经验)
关于childNodes和children
weixin_30532837的博客
10-08 99
1、childNodes。 会把注释、空文本、非空文本、标签都当做节点。 2、children： 在IE8以后的版本只会找到标签元素。不包括文本、空文本、注释。在IE8以前的版本会找到标签元素和注释，但是不包括非空文本和空文本。 所以控制子元素，使用children比较方便。但需要注意IE8以前的版本。 转载于:https://www.cnblogs.com/htmlli/p/763801...
牛客刷题——前端面试【八】谈一谈组件化开发中父访问子（children、ref）
yzq0820的博客
10-01 1582
refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到$children。并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用。来生成子组件，并且使用 Array 作为真正的来源。直接获取**当前实例的直接子组件，需要注意。来进行数据绑定，考虑使用一个数组配合。
javascript 中 parentNode，childNodes、children 应用
热门推荐
fox123871的专栏
07-12 1万+
"parentNode"常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点     例: My text 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElemen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值