จะตรวจสอบได้อย่างไรว่า element มีลูกใน 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 ซึ่งเป็นตอนแรกที่เขียนขึ้น) หากรองรับอุปกรณ์มือถือรุ่นเก่าโปรดตรวจสอบการรองรับ

หากคุณไม่ต้องการ 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;
}

ตามที่กล่าวถึง slashnick & bobince hasChildNodes()จะคืนค่าจริงสำหรับช่องว่าง (โหนดข้อความ) อย่างไรก็ตามฉันไม่ต้องการพฤติกรรมนี้และสิ่งนี้ได้ผลสำหรับฉัน :)

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

แก้ไข : สำหรับฟังก์ชันเดียวกันนี่เป็นทางออกที่ดีกว่า:

 element.children.length > 0

children[]เป็นส่วนย่อยchildNodes[]ที่มีองค์ประกอบเท่านั้น

ความเข้ากันได้

คุณสามารถตรวจสอบว่าองค์ประกอบมีโหนดลูกelement.hasChildNodes()หรือไม่ ระวังใน Mozilla สิ่งนี้จะส่งคืนจริงหากช่องว่างหลังแท็กดังนั้นคุณจะต้องตรวจสอบประเภทแท็ก

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

คุณสามารถทำสิ่งต่อไปนี้ได้:

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

สิ่งนี้ใช้เมธอด trim () เพื่อจัดการกับองค์ประกอบว่างที่มีเฉพาะช่องว่าง (ซึ่งในกรณีนี้hasChildNodesจะส่งกลับค่าจริง) ว่าว่างเปล่า

การสาธิต 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>

ส่งคืนtrue(และออกจากลูป) ทันทีที่องค์ประกอบหนึ่งมีเนื้อหาประเภทใดก็ได้ข้างช่องว่างหรือขึ้นบรรทัดใหม่

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