Làm thế nào để kiểm tra xem phần tử có con nào trong Javascript không?

Câu hỏi đơn giản, tôi có một yếu tố mà tôi đang tìm hiểu .getElementById (). Làm cách nào để kiểm tra xem nó có con nào không?

Một số cách:

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

hoặc hasChildNodes()hàm:

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

hoặc lengthtài sản của childNodes:

if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
    // It has at least one
}

Nếu bạn chỉ muốn biết về các phần tử con (trái ngược với các nút văn bản, nút thuộc tính, v.v.) trên tất cả các trình duyệt hiện đại (và IE8 - trên thực tế, ngay cả IE6), bạn có thể làm điều này: (cảm ơn Florian !)

if (element.children.length > 0) { // Or just `if (element.children.length)`
    // It has at least one element as a child
}

Dựa trên childrentài sản, mà đã không được quy định tại DOM1 , DOM2 , hoặc DOM3 , nhưng trong đó có hỗ trợ gần như phổ quát. (Nó hoạt động trên IE6 trở lên và Chrome, Firefox và Opera ít nhất là từ tháng 11 năm 2012, khi điều này được viết ban đầu.) Nếu hỗ trợ các thiết bị di động cũ hơn, hãy nhớ kiểm tra hỗ trợ.

Nếu bạn không cần hỗ trợ IE8 trở lên, bạn cũng có thể thực hiện việc này:

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

Điều đó dựa vào firstElementChild. Giống như children, nó cũng không được định nghĩa trong DOM1-3, nhưng không giống như childrennó không được thêm vào IE cho đến IE9.

Nếu bạn muốn gắn bó với một cái gì đó được xác định trong DOM1 (có thể bạn phải hỗ trợ các trình duyệt thực sự khó hiểu), bạn phải làm nhiều việc hơn:

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

Tất cả những thứ đó đều là một phần của DOM1 và được hỗ trợ gần như toàn cầu.

Sẽ dễ dàng gói gọn điều này trong một hàm, ví dụ:

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

Như đề cập tới slutnick & bobince, hasChildNodes()sẽ trả về true cho khoảng trắng (nút văn bản). Tuy nhiên, tôi không muốn hành vi này và điều này đã hiệu quả với tôi :)

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

Chỉnh sửa : đối với cùng một chức năng, đây là giải pháp tốt hơn:

 element.children.length > 0

children[]là một tập con của childNodes[], chỉ chứa các phần tử.

Khả năng tương thích

Bạn có thể kiểm tra xem phần tử có các nút con hay không element.hasChildNodes(). Hãy lưu ý trong Mozilla, điều này sẽ trả về true nếu là khoảng trắng sau thẻ, vì vậy bạn sẽ cần xác minh loại thẻ.

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

Bạn cũng có thể làm như sau:

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

Điều này sử dụng phương thức trim () để xử lý các phần tử trống chỉ có khoảng trắng (trong trường hợp này hasChildNodestrả về true) là trống.

JSBin Demo

Mảnh tài liệu muộn nhưng có thể là một nút:

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

Xem:
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js # L741

Hãy thử thuộc tính childElementCount :

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

Một isEmpty( <selector> )chức năng có thể tái sử dụng .
Bạn cũng có thể chạy nó cho một tập hợp các phần tử (xem ví dụ)

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>

trả về true(và thoát khỏi vòng lặp) ngay khi một phần tử có bất kỳ loại nội dung nào bên cạnh dấu cách hoặc dòng mới.

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