如何检查元素在 Javascript 中是否有子元素？

简单的问题，我有一个元素，我通过 .getElementById ()抓取。我怎么检查它是否有孩子？

229144 次浏览
小开
最佳答案

有几种方法:

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)上的子 元素(与文本节点、属性节点等相反) ，那么您可以这样做: (谢谢你)

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

这取决于 children的性质，这是没有定义在 DOM1，DOM2，或者 DOM3，但它有近乎普遍的支持。(它可以在 IE6及以上版本中使用，而 Chrome、 Firefox 和 Opera 则可以在 至少中使用，最早可以追溯到2012年11月，那时它刚刚被编写出来。)如果支持较旧的移动设备，一定要检查是否支持。

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

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

它依赖于 firstElementChild。和 children一样，它也没有在 DOM1-3中定义，但是和 children不同的是，它直到 IE9才被添加到 IE 中。childElementCount也是如此:

if (element.childElementCount !== 0) {
// It has at least one element as a child
}

如果你想坚持在 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;
}
小开

您可以检查元素是否有子节点 element.hasChildNodes()。注意，在 Mozilla 中，如果标记后面是空格，这将返回 true，因此您需要验证标记类型。

Https://developer.mozilla.org/en/dom/node.haschildnodes

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

正如 slashnick & bobince 提到的，对于空格(文本节点) ，hasChildNodes()将返回 true。然而，我并不想要这种行为，这对我很有效:) 

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

编辑 : 对于同样的功能，这是一个更好的解决方案:

 element.children.length > 0

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

兼容性

小开

迟到但文件碎片可能是一个节点:

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

小开

你也可以这样做:

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

这使用 trim ()方法将只有空格(在这种情况下，hasChildNodes返回 true)的空元素视为空元素。

注意: 上面的方法不会过滤掉 评论

为了过滤掉注释，我们可以使用只读的 Node.nodeType属性，其中 Node.COMMENT_NODE(注释节点，例如 <!-- … -->)的常量值为 -8

if (element.firstChild?.nodeType !== 8 && element.innerHTML.trim() !== '' {
// It has at least one
}


let divs = document.querySelectorAll('div');
for(element of divs) {
if (element.firstChild?.nodeType !== 8 && element.innerHTML.trim() !== '') {
console.log('has children')
} else { console.log('no children') }
}
<div><span>An element</span>
<div>some text</div>
<div>     </div> <!-- whitespace -->
<div><!-- A comment --></div>
<div></div>

小开

可重用的 isEmpty( <selector> )函数。
您还可以将其运行到一个元素集合中(参见示例)

const isEmpty = sel =>
![... document.querySelectorAll(sel)].some(el => el.innerHTML.trim() !== "");


console.log(
isEmpty("#one"), // false
isEmpty("#two"), // true
isEmpty(".foo"), // false
isEmpty(".bar")  // true
);
<div id="one">
foo
</div>


<div id="two">
 

</div>


<div class="foo"></div>
<div class="foo"><p>foo</p></div>
<div class="foo"></div>


<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>

只要一个元素在空格或换行符旁边有任何类型的内容，就返回 true(并退出循环)。

小开

试试 Child ElementCount 属性:

if ( element.childElementCount !== 0 ){
alert('i have children');
} else {
alert('no kids here');
}

提交答案