如何检查元素在 Javascript 中是否有任何子元素? [英] How to check if element has any children in Javascript?

问题描述

一个简单的问题，我有一个通过 .getElementById () 获取的元素.我如何检查它是否有孩子?

Simple question, I have an element which I am grabbing via .getElementById (). How do I check if it has any children?

推荐答案

几种方式:

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 you only want to know about child elements (as opposed to text nodes, attribute nodes, etc.) on all modern browsers (and IE8 — in fact, even IE6) you can do this: (thank you 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 月，当它最初编写时.)如果支持较旧的移动设备，请务必检查支持.

That relies on the children property, which wasn't defined in DOM1, DOM2, or DOM3, but which has near-universal support. (It works in IE6 and up and Chrome, Firefox, and Opera at least as far back as November 2012, when this was originally written.) If supporting older mobile devices, be sure to check for support.

如果您不需要 IE8 及更早版本的支持，您也可以这样做:

If you don't need IE8 and earlier support, you can also do this:

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

这依赖于 firstElementChild.与children 一样，它也没有在DOM1-3 中定义，但与children 不同的是，它直到IE9 才被添加到IE 中.这同样适用于 childElementCount:

That relies on firstElementChild. Like children, it wasn't defined in DOM1-3 either, but unlike children it wasn't added to IE until IE9. The same applies to childElementCount:

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

如果你想坚持在 DOM1 中定义的东西(也许你必须支持非常晦涩的浏览器)，你必须做更多的工作:

If you want to stick to something defined in DOM1 (maybe you have to support really obscure browsers), you have to do more work:

var hasChildElements, child;
hasChildElements = false;
for (child = element.firstChild; child; child = child.nextSibling) {
    if (child.nodeType == 1) { // 1 == Element
        hasChildElements = true;
        break;
    }
}

所有这些都是 DOM1，并且几乎得到普遍支持.

All of that is part of DOM1, and nearly universally supported.

将其封装在一个函数中会很容易，例如:

It would be easy to wrap this up in a function, e.g.:

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

这篇关于如何检查元素在 Javascript 中是否有任何子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！