Как проверить, есть ли у элемента дочерние элементы в Javascript?

Question

Простой вопрос, у меня есть элемент, который я получаю через .getElementById (). Как проверить, есть ли у него дети?

Answer 1

Пара способов:

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), вы можете сделать это : (спасибо Флориан !)

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 года, когда это было изначально написано.) Если поддерживается более старые мобильные устройства, обязательно проверьте поддержку.

Если вам не нужна поддержка IE8 и более ранних версий, вы также можете сделать это:

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

Это зависит от firstElementChild. Как и children, он также не был определен в DOM1-3, но в отличие от children он не был добавлен в IE до IE9.

Если вы хотите придерживаться чего-то определенного в 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), как пустые.

JSBin Demo

Answer 4

Вы можете проверить, есть ли у элемента дочерние узлы element.hasChildNodes(). Осторожно, в Mozilla это вернет true, если после тега есть пробел, поэтому вам нужно будет проверить тип тега.

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

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

Попробуйте свойство childElementCount :

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

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>