JavaScriptで要素に子があるかどうかを確認するにはどうすればよいですか？

簡単な質問です.getElementById ()。私がを介して取得している要素があります。子供がいるかどうかを確認するにはどうすればよいですか？

いくつかの方法：

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

またはhasChildNodes()関数：

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

またはのlengthプロパティchildNodes：

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でも定義されていませんが、childrenIE9まで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()空白（テキストノード）に対してtrueを返します。しかし、私はこの動作を望んでおらず、これは私にとってはうまくいきました:)

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

編集：同じ機能の場合、これはより良い解決策です：

 element.children.length > 0

children[]のサブセットでchildNodes[]、要素のみを含みます。

互換性

要素に子ノードがあるかどうかを確認できelement.hasChildNodes()ます。Mozillaでは、タグの後に空白がある場合はtrueを返すため、タグタイプを確認する必要があることに注意してください。

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

childElementCountプロパティを試してください：

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

再利用可能な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>

true1つの要素にスペースまたは改行以外のコンテンツが含まれるとすぐに戻ります（ループを終了します）。

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