[javascript] 요소에 Javascript에 자식이 있는지 확인하는 방법은 무엇입니까?

몇 가지 방법 :

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과까지 작동 이상 까지 다시이 원래 작성되었습니다 년 11 월 2012 년 한.) 이전의 모바일 기기를 지원하는 경우, 반드시 지원을 확인 할 수 있습니다.

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

답변

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

 element.children.length > 0

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

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

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

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>