如何检查元素是否有任何儿童在Javascript?

简单的问题,我有一个元素,我通过.getElementById ()抓住。 如何检查是否有孩子?

几种方法:

 if (element.firstChild) { // It has at least one } 

hasChildNodes()函数:

 if (element.hasChildNodes()) { // It has at least one } 

或者childNodeslength属性:

 if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)` // It has at least one } 

如果你只想知道所有现代浏览器上的子元素 (相对于文本节点,属性节点等)(IE8,甚至IE6),你可以这样做:( 谢谢Florian !)

 if (element.children.length > 0) { // Or just `if (element.children.length)` // It has at least one element as a child } 

这依赖于DOM1 , DOM2 DOM3中没有定义的children财产,但是它几乎得到了普遍的支持。 ( 至less在2012年11月,最初编写时,它可以在IE6及以上版本以及Chrome,Firefox和Opera中运行)。如果支持旧版移动设备,请务必检查是否支持。

如果你不需要IE8和更早的支持,你也可以这样做:

 if (element.firstElementChild) { // It has at least one element as a child } 

这依赖于firstElementChild 。 像children一样,它也没有在DOM1-3中定义,但不像children ,直到IE9才被添加到IE。

如果你想坚持在DOM1中定义的东西(也许你必须支持真正模糊的浏览器),你必须做更多的工作:

 var hasChildElements, child; hasChildElements = false; for (child = element.firstChild; child; child = child.nextSibling) { if (child.nodeType == 1) { // 1 == Element hasChildElements = true; break; } } 

所有这些都是DOM1的一部分,并且几乎得到了普遍的支持。

将其封装在一个函数中很容易,例如:

 function hasChildElement(elm) { var child, rv; if (elm.children) { // Supports `children` rv = elm.children.length !== 0; } else { // The hard way... rv = false; for (child = element.firstChild; !rv && child; child = child.nextSibling) { if (child.nodeType == 1) { // 1 == Element rv = true; } } } return rv; } 

正如Slashnick&bobince提到的, hasChildNodes()将返回空白(文本节点)的真。 但是,我不希望这种行为,这对我工作:)

 element.getElementsByTagName('*').length > 0 

编辑 :对于相同的function,这是一个更好的解决scheme:

  element.children.length > 0 

children[]childNodes[]的子集,仅包含元素。

兼容性

你可以检查元素是否有子节点element.hasChildNodes() 。 注意在Mozilla中,如果标签后面是空格,则返回true,因此您需要validation标签types。

https://developer.mozilla.org/En/DOM/Node.hasChildNodes

您也可以执行以下操作:

 if (element.innerHTML.trim() !== '') { // It has at least one } 

这使用trim()方法来处理只有空格的空元素(在这种情况下, hasChildNodes返回true)为空。

JSBin演示

迟到,但文档片段可能是一个节点:

 function hasChild(el){ var child = el && el.firstChild; while (child) { if (child.nodeType === 1 || child.nodeType === 11) { return true; } child = child.nextSibling; } return false; } // or function hasChild(el){ for (var i = 0; el && el.childNodes[i]; i++) { if (el.childNodes[i].nodeType === 1 || el.childNodes[i].nodeType === 11) { return true; } } return false; } 

看到:
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js#L741

 <script type="text/javascript"> function uwtPBSTree_NodeChecked(treeId, nodeId, bChecked) { //debugger; var selectedNode = igtree_getNodeById(nodeId); var ParentNodes = selectedNode.getChildNodes(); var length = ParentNodes.length; if (bChecked) { /* if (length != 0) { for (i = 0; i < length; i++) { ParentNodes[i].setChecked(true); } }*/ } else { if (length != 0) { for (i = 0; i < length; i++) { ParentNodes[i].setChecked(false); } } } } </script> <ignav:UltraWebTree ID="uwtPBSTree" runat="server"..........> <ClientSideEvents NodeChecked="uwtPBSTree_NodeChecked"></ClientSideEvents> </ignav:UltraWebTree>