`
hengxing2009
  • 浏览: 89161 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

childNodes与children

阅读更多
1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。

有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况:

浏览器IE6/7/8/Safari/Chrome/OperaIE9/Firefox
childNodes(i)支持不支持


有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
	for(var i=0,e;e=elem.childNodes[i++];){
		if(e.nodeType==1)
			return e;
	}		
}


2,children 属性,非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。


分享到:
评论

相关推荐

    JavaScript操作DOM元素的childNodes和children区别

    与childNodes不同的是,children属性仅返回指定元素的所有元素节点(ElementNode)。也就是说,使用children属性不会获取到文本节点、注释节点等其他类型的节点。这使得children属性非常适合用于获取一个元素下的...

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

    JavaScript中的parentNode, childNodes, children是DOM操作中非常基础且重要的属性,它们能够帮助开发者获取元素之间的层级关系和结构。在本篇文章中,我们将详细探讨这些属性的用途、区别和最佳实践。 首先,让...

    js -- childNodes

    这是`childNodes`和`children`之间的一个关键区别。 为了更有效地遍历和操作子节点,了解`NodeList`对象的特性是必要的。`NodeList`不是一个数组,而是一个动态的集合,它会随着DOM树的变化实时更新。因此,不能...

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

    与`childNodes`类似,`children`也是一个集合,但它是DHTML(Dynamic HTML)对象的集合,只包含元素节点,不包括文本节点或其他非元素节点。这意味着,`children`只返回父元素的直接子元素,提供了更简洁的元素访问...

    childNodes.length与children.length的区别

    `childNodes.length`和`children.length`是两个经常在处理DOM元素时遇到的属性,它们之间存在着重要的区别。 首先,`childNodes.length`返回的是一个元素节点的所有子节点的数量,这些子节点不仅包括HTML元素节点,...

    zuoxiaobai#zuo11.com#element.childNodes 和 element.children 有什么区别

    2. childNodes 类型是 NodeList,HTMLCollection 类型是 HTMLCollection", 1. childNodes 获取的

    编写兼容IE和FireFox的脚本

    四、childNodes与children Firefox不支持`element.children`,但提供了`element.childNodes`。然而,`childNodes`在Firefox中包含了空白文本节点和换行符。为了避免这些非元素节点,可以使用`element.children`...

    使用 childNodes 和 rows,cells 操作表格列着色源代码

    本文包含两个源代码:使用 childNodes 操作表格列着色、使用 rows,cells 操作表格列着色。两种着色方式有什么区别?具体分析请参阅作者博客:http://blog.csdn.net/defonds/archive/2010/07/17/5741214.aspx。

    childNodes 用法两例

    然而,需要注意的是,`childNodes`包含所有类型的子节点,不仅仅是元素节点,所以在实际使用中可能需要配合`nodeType`属性(如只处理元素节点,可检查`nodeType`是否等于1)或者使用`children`属性(只包含元素节点...

    JS中用childNodes获取子元素换行会产生一个子元素

    这个例子展示了为什么我们在处理DOM元素时,如果想得到元素节点的列表而不包含任何文本节点,更倾向于使用`children`属性而不是`childNodes`。`children`属性仅返回元素节点,忽略所有文本节点和注释节点,从而避免...

    JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

    1. children与childNodes IE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。比如: <div>...

    PHP children()函数讲解

    如果你正在处理的是DOMDocument对象,那么你应该使用`DOMElement::childNodes`来获取子节点。 在实际开发中,结合其他XML处理函数,如`simplexml_load_file()`、`simplexml_load_string()`和`xpath`查询,`children...

    浅谈js的html元素的父节点,子节点

    parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 示例: “parentNode” 常用来...

    javascript引用对象的方法代码

    同一页面内的引用方法: 1、使用id: link1.href 2、使用name: document.all.link1.href 3、使用sourseIndex: document.all(4).href //注意,...boundElements、cells、childNodes、children、controlRange、eleme

Global site tag (gtag.js) - Google Analytics