javascript中的childNodes属性的几点思考

最新推荐文章于 2022-12-09 16:05:18 发布
最新推荐文章于 2022-12-09 16:05:18 发布
阅读量235 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thewind_rises/article/details/71250264
版权
代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="box"> 
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>


<div id="test"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>


<script type="text/javascript">
  var x = document.getElementById("box").childNodes;
  for(var i = 0; i < x.length; i++){
        document.write("节点" + i + "的属性是：" + x[i].nodeType + "<br>");
  }
  document.write("<br><br><br>");
  var y = document.getElementById("test").childNodes;
  for(var i = 0; i < x.length; i++){
        document.write("节点" + i + "的属性是：" + y[i].nodeType + "<br>");
  }
</script> 


</body>

</html>


结果

javascript

jQuery
PHP

javascript

jQuery
PHP
节点0的属性是：3
节点1的属性是：1
节点2的属性是：3
节点3的属性是：1
节点4的属性是：3
节点5的属性是：1
节点6的属性是：3



节点0的属性是：1
节点1的属性是：1
节点2的属性是：1


看代码中高亮的两段代码，内容一模一样但是排版不一样，这就导致了一个奇怪的结果（在火狐浏览器和chrome浏览器中测试）如上图结果所示。

由此可知childNodes属性的结果和排版有关。

而且childNodes属性还与浏览器的内核有关：

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

求知的小蚂蚁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中的childNodes节点
syl2850246的博客
09-22 991
在JS中使用childNodes节点的时候，它不仅会把标签算作一个子元素，而且它也会把标签与标签之间的空格或回车当作一个子元素(文本节点)。
JavaScript学习——childNodes属性、nodeType属性
毛线的博客
10-30 1274
1.childNodes属性 在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素。它是一个包含这个元素全部子元素的数组 element.childNodes 假设我们现在需要把body的所有子元素检索出来，我们可以这么做： var body_element = document.getElementsByTagName("body"); alert(b
JavaScript中的Node相关内容介绍
天涯 书塾
03-23 749
Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个……也可以是一个节点，在……中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。Node的属性介绍：nodeType：显示节点的类型nodeName：显示节点的名称nodeValue：显示节点的值attribute
JavaScript childNodes
m0_37996243的博客
04-06 309
JS中的childNodes 获取的不仅仅是html元素，同时连续的文本也是一个子节点，如： <p id="demo">&nbsp;&nbsp;<input />&nbsp;</p> alert(document.getElementById("demo").childNodes.length);// 结果是 3 ...
javascript中children,childNodes等节点属性
weixin_30649859的博客
01-17 183
1、children与childNodes children： 获取子元素节点，无兼容问题 childnNodes： 　　IE：获取子元素节点 　　非IE（chrome，Firefox等）：获取子节点，包括元素节点和文本节点 2、firstChild与firstElementChild firstChild： 　　IE6,7,8：获取第一个子元素节点 　　非IE6,7,8：获取第一...
JavaScript操作DOM元素的childNodes和children区别
10-24
主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下
javascript中parentNode,childNodes,children的应用详解
10-26
本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JavaScript变量Dom对象的所有属性
10-15
在JavaScript中，我们可以创建、访问和修改DOM对象的属性，以实现动态更新网页的效果。 在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是...
IE与FireFox中的childNodes区别
09-05
在JavaScript中，对DOM元素进行操作和遍历是常见的任务，`getElementsByTagName` 和 `childNodes` 都是用于处理这一需求的API。`getElementsByTagName` 用于根据标签名获取元素的子节点，而`childNodes` 返回一个...
JavaScript高级程序设计之DOM 扩展之专有扩展之children属性第11.4.2讲
Jane617_min的专栏
11-05 541
由于IE9 之前的版本与其他浏览器在处理文本节点中的空白符时有差异，因此就出现了children 属性。这个属性是HTMLCollection 的实例，只包含元素中同样还是元素的子节点。除此之外， children 属性与childNodes 没有什么区别，即在元素只包含元素子节点时，这两个属性的值相同。 下面是访问children 属性的示例代码： var childCount = el
js中children和childNodes的区别
08-30 748
.children is a property of an Element. Only Elements have children, and these children are all of type Element（元素节点）. However .childNodes is a property of Node. .childNodes can contain any
childNodes属性使用
君林天下的专栏
03-08 1647
/*打印当前页面元素树结构 递归 ** 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中childNodes易错点、详解定义以及用法
君莫笑
09-13 6697
js中childNodes易错点、详解定义以及用法 最近学习的时候，我遇到了childNodes的一些问题，我查阅了一些资料，总结一下其定义及用法。在学习childNodes之前，我们需要先了解一下DOM。 　　 DOM：文档对象模型，描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。如下图文档对象模型图册所示： 　它包括5种节点类型如下： 节点类型 说明 值
Jquery 选择兄弟节点
最新发布
qq_45256777的博客
12-09 5686
j'qjq
jQuery使用总结
oops
07-31 335
入口函数 $(document).ready(function(){ });语法糖可简化为$(function () { }) $的另一种别名jQuery，也可以自定义别名const $j = jQuery.noConflict()   DOM jQuery核心功能用来快速查找节点 - query jq中的节点查询 仿照了css选择器的规则，因此我们把jq的dom称为选择器 元素选择 $("#box"); //ID选择 $(".box"); //类选择 $("div"); //标签选择 $(
jQuery获取父节点、子节点、兄弟节点
码农桃子的博客
07-07 1万+
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；
JQ获取上级、同级、下级元素
weixin_30470857的博客
03-10 989
------------------------------------------------------------------------------jQuery---------------------------------------------------------------------- 1.父级： jQuery.parent(expr) 找父亲节点，可以传入expr进行...
JS中，children和childNodes的不同之处
热门推荐
sunling的专栏
11-21 1万+
var ul = document.getElementById("ul"); var children =  ul.children; console.log(children.length);//children 只选择元素节点,没有兼容性问题（但是IE678 会包含注释节点，尽量不在里面写注释）  children常用 //childnodes方法获取孩子节点   //var c
javascript中childNodes与children的区别
weixin_30609331的博客
05-14 480
1、childNodes：获取节点，不同浏览器表现不同； 　　IE：只获取元素节点； 　　非IE：获取元素节点与文本节点； 　　解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3')continue 2、children：获取元素节点，浏览器表现相同。 　　因此建议使用childre...
JavaScript DOM操作：parentNode与previousSibling属性应用
"精通JavaScript（中文清晰优化版...同时，DOM提供了许多其他有用的属性和方法，例如`nextSibling`、`childNodes`等，这些同样值得深入学习和掌握。通过熟练运用DOM，开发者可以构建出更加灵活、响应式的网页应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值