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

Question

簡單的問題，我有一個通過.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
}

這依賴於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;
}

Answer 2

正如 slashnick 和 bobince 所提到的， hasChildNodes()將為空白（文本節點）返回 true。 但是，我不想要這種行為，這對我有用:)

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

編輯：對於相同的功能，這是一個更好的解決方案：

 element.children.length > 0

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

兼容性

Answer 3

您還可以執行以下操作：

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>

Answer 4

您可以檢查元素是否具有子節點element.hasChildNodes() 。 當心在 Mozilla 中，如果標簽后面是空格，這將返回 true，因此您需要驗證標簽類型。

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

Answer 5

嘗試childElementCount 屬性：

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

Answer 6

遲到但文檔片段可能是一個節點：

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 7

一個可重用的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 （並退出循環）。

Answer 8

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