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

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

Answer 1

几种方法：

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

或hasChildNodes()函数：

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

或者childNodes的length属性：

 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; } 

Answer 2

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

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

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

  element.children.length > 0 

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

兼容性

Answer 3

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

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

Answer 4

您也可以执行以下操作：

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

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

JSBin演示

Answer 5

迟到，但文档片段可能是一个节点：

 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

Answer 6

 <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>