วิธีที่ดีที่สุดในการรับโหนดย่อย

ฉันสงสัยว่า JavaScript มีวิธีการมากมายเพื่อให้ได้องค์ประกอบลูกแรกจากองค์ประกอบใด ๆ แต่สิ่งใดที่ดีที่สุด โดยที่ดีที่สุดฉันหมายถึง: เบราว์เซอร์ที่เข้ากันได้มากที่สุดเร็วที่สุดครอบคลุมที่สุดและคาดเดาได้เมื่อมีพฤติกรรม รายการของวิธีการ / คุณสมบัติที่ฉันใช้เป็นนามแฝง:

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

ใช้ได้กับทั้งสองกรณี:

var child = elem.childNodes[0]; // or childNodes[1], see below

นั่นคือในกรณีของรูปแบบหรือ<div>การทำซ้ำ หากฉันอาจพบองค์ประกอบข้อความ:

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

เท่าที่ผมสามารถทำงานออกfirstChildใช้ NodeList จากchildNodesและการใช้งานfirstElementChild childrenฉันใช้ข้อสมมติฐานนี้อ้างอิง MDN:

childNodeเป็นการอ้างอิงถึงองค์ประกอบลูกแรกของโหนดองค์ประกอบหรือnullถ้าไม่มี

ฉันเดาว่าในแง่ของความเร็วความแตกต่างถ้ามีจะไม่เป็นอะไรเลยเนื่องจากfirstElementChildมีการอ้างอิงอย่างมีประสิทธิภาพchildren[0]และchildrenวัตถุนั้นอยู่ในความทรงจำอยู่แล้ว

สิ่งที่ทำให้ฉันเป็นchildNodesวัตถุ ฉันใช้มันเพื่อดูฟอร์มในองค์ประกอบตาราง ในขณะที่childrenรายการองค์ประกอบของรูปแบบทั้งหมดchildNodesก็ดูเหมือนว่าจะมีช่องว่างจากรหัส HTML:

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

บันทึกทั้งคู่ <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

บันทึกทั้งหมด<input type="text"… >. มาทำไม ฉันเข้าใจว่าวัตถุหนึ่งจะอนุญาตให้ฉันทำงานกับรหัส HTML "แบบดิบ" ในขณะที่อีกชิ้นหนึ่งยึดติดกับ DOM แต่childNodesองค์ประกอบดูเหมือนว่าจะใช้ได้ทั้งสองระดับ

หากต้องการกลับไปที่คำถามเริ่มต้นฉันจะเดาว่า: หากฉันต้องการวัตถุที่ครอบคลุมที่สุดchildNodesเป็นวิธีที่จะไป แต่เนื่องจากความครอบคลุมของมันอาจไม่สามารถคาดเดาได้มากที่สุดในแง่ของการคืนองค์ประกอบที่ฉันต้องการ / คาดหวังในช่วงเวลาใดก็ตาม การสนับสนุนข้ามเบราว์เซอร์อาจพิสูจน์ว่าเป็นสิ่งที่ท้าทายในกรณีนั้นแม้ว่าฉันจะผิด

ใครสามารถอธิบายความแตกต่างระหว่างวัตถุที่อยู่ในมือ? หากมีความแตกต่างของความเร็วอย่างไรก็ตามเล็กน้อยฉันก็รู้เช่นกัน หากฉันเห็นสิ่งผิดทั้งหมดรู้สึกฟรีเพื่อให้ความรู้แก่ฉัน

PS: ได้โปรดได้โปรดฉันชอบ JavaScript ดังนั้นใช่ฉันต้องการจัดการกับสิ่งนี้ คำตอบเช่น“ jQuery เกี่ยวข้องกับสิ่งนี้เพื่อคุณ” ไม่ใช่สิ่งที่ฉันกำลังมองหาjQuery แท็ก

ดูเหมือนว่าคุณกำลังคิดมากอยู่ คุณสังเกตเห็นความแตกต่างระหว่างchildNodesและchildrenซึ่งchildNodesประกอบด้วยโหนดทั้งหมดรวมถึงโหนดข้อความที่ประกอบด้วยช่องว่างทั้งหมดในขณะที่childrenเป็นคอลเลกชันของโหนดลูกที่เป็นองค์ประกอบเท่านั้น นั่นคือทั้งหมดที่มีให้มัน

ไม่มีอะไรที่คาดเดาไม่ได้เกี่ยวกับคอลเล็กชั่นทั้งสองแม้ว่าจะมีปัญหาสองสามข้อที่ต้องระวัง:

• IE <= 8 ไม่รวมถึงโหนดข้อความ white-only space ในchildNodesขณะที่เบราว์เซอร์อื่นทำ
• IE <= 8 รวมโหนดความคิดเห็นไว้childrenในขณะที่เบราว์เซอร์อื่นมีองค์ประกอบเท่านั้น

children, firstElementChildและเพื่อน ๆ มีสิ่งอำนวยความสะดวกเพียงแค่นำเสนอมุมมองที่กรองของ DOM จำกัด องค์ประกอบเพียง

firstElementChild อาจไม่พร้อมใช้งานใน IE <9 (เฉพาะ firstChild)

บน IE <9 firstChild เป็น firstElementChild เนื่องจาก MS DOM (IE <9) ไม่ได้เก็บโหนดข้อความว่างเปล่า แต่ถ้าคุณทำเช่นนั้นกับเบราว์เซอร์อื่นพวกเขาจะกลับมาโหนดข้อความเปล่า ...

ทางออกของฉัน

child=(elem.firstElementChild||elem.firstChild)

สิ่งนี้จะให้ลูกคนแรกแม้ใน IE <9

วิธีข้ามเบราเซอร์ที่จะทำคือการใช้childNodesที่จะได้รับNodeListแล้วให้อาร์เรย์ของโหนดทั้งหมดที่มีELEMENT_NODEnodeType

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}

http://jsfiddle.net/s4kxnahu/

โดยเฉพาะอย่างยิ่งเรื่องง่ายถ้าคุณกำลังใช้ห้องสมุดยูทิลิตี้เช่นlodash :

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    return _.where(element.childNodes, {nodeType: 1});
}

อนาคต:

คุณสามารถใช้querySelectorAllร่วมกับ:scopeคลาสหลอก (ตรงกับองค์ประกอบที่เป็นจุดอ้างอิงของตัวเลือก):

parentElement.querySelectorAll(':scope > *');

ในขณะที่เขียนนี้:scopeได้รับการสนับสนุนใน Chrome, Firefox และ Safari

เพียงเพื่อเพิ่มคำตอบอื่น ๆ ยังคงมีความแตกต่างที่สำคัญที่นี่โดยเฉพาะเมื่อจัดการกับ<svg>องค์ประกอบ

ฉันได้ใช้ทั้ง.childNodesและ.childrenและชอบทำงานกับผู้HTMLCollectionส่งที่.childrenได้รับ

แต่วันนี้ฉันวิ่งเข้าไปในปัญหากับ IE / ขอบล้มเหลวเมื่อใช้บน.children <svg>ในขณะที่.childrenได้รับการสนับสนุนใน IE ในองค์ประกอบพื้นฐาน HTML, มันไม่ได้รับการสนับสนุนบนเศษเอกสาร / เอกสารหรือองค์ประกอบ SVG

สำหรับฉันฉันสามารถคว้าองค์ประกอบที่ต้องการได้.childNodes[n]เพราะฉันไม่มีโหนดข้อความที่ไม่เกี่ยวข้องที่ต้องกังวล คุณอาจทำสิ่งเดียวกันได้ แต่อย่างที่กล่าวไว้ข้างต้นอย่าลืมว่าคุณอาจพบเจอกับสิ่งที่ไม่คาดคิด

หวังว่านี่จะเป็นประโยชน์กับคนที่เกาหัวพยายามคิดว่าทำไมมันถึง.childrenทำงานที่อื่นใน js บน IE สมัยใหม่และล้มเหลวในเอกสารหรือองค์ประกอบ SVG

เฮ้พวกอย่าให้พื้นที่สีขาวหลอกคุณ เพียงทดสอบสิ่งนี้ในเบราว์เซอร์คอนโซล ใช้จาวาสคริปต์ นี่คือตัวอย่างของชุด ul สองชุดที่มีคลาสเดียวกัน คุณไม่จำเป็นต้องมีรายการ 'ul' ของคุณทั้งหมดในหนึ่งบรรทัดเพื่อหลีกเลี่ยงพื้นที่สีขาวเพียงแค่ใช้จำนวนแถวของคุณเพื่อข้ามพื้นที่สีขาว

วิธีการได้รับพื้นที่รอบ ๆ สีขาวมีquerySelector()แล้วchildNodes[]js ลิงค์ซอ: https://jsfiddle.net/aparadise/56njekdo/

var y = document.querySelector('.list');
var myNode = y.childNodes[11].style.backgroundColor='red';

<ul class="list">
    <li>8</li>
    <li>9</li>
    <li>100</li>
</ul>

<ul class="list">
    <li>ABC</li>
    <li>DEF</li>
    <li>XYZ</li>
</ul>