จะรับองค์ประกอบลูกตามชื่อชั้นได้อย่างไร?

ฉันกำลังพยายามหาช่วงเด็กที่มี class = 4 นี่คือองค์ประกอบตัวอย่าง:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

เครื่องมือที่ฉันมีคือ JS และ YUI2 ฉันสามารถทำสิ่งนี้ได้:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

สิ่งเหล่านี้ใช้ไม่ได้ใน IE ฉันได้รับข้อผิดพลาดว่าวัตถุ (doc) ไม่รองรับเมธอดหรือคุณสมบัตินี้ (getElementsByClassName) ฉันได้ลองใช้ตัวอย่างบางส่วนของการใช้งาน getElementsByClassName แบบข้ามเบราว์เซอร์แล้ว แต่ไม่สามารถใช้งานได้และยังคงได้รับข้อผิดพลาดนั้น

ฉันคิดว่าสิ่งที่ฉันต้องการคือ getElementsByClassName ข้ามเบราว์เซอร์หรือฉันต้องใช้ doc.getElementsByTagName ('span') และวนซ้ำจนกว่าฉันจะพบคลาส 4 ฉันไม่แน่ใจว่าจะทำอย่างไร

ใช้doc.childNodesเพื่อวนซ้ำแต่ละรายการspanจากนั้นกรองรายการที่มีclassNameค่าเท่ากับ4:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

​

ใช้ querySelector และ querySelectorAll

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9 ขึ้นไป

;)

คำตอบที่ยอมรับจะตรวจสอบเด็กในทันทีเท่านั้น บ่อยครั้งที่เรามองหาผู้สืบทอดที่มีชื่อคลาสนั้น

นอกจากนี้บางครั้งเราต้องการเด็กที่มี className

ตัวอย่างเช่น<div class="img square"></div>ควรจะตรงกับการค้นหาบน className "img" แม้ว่ามันเป็นที่แน่นอน className ไม่ได้ "img"

นี่เป็นวิธีแก้ปัญหาสำหรับปัญหาทั้งสองนี้:

ค้นหาอินสแตนซ์แรกขององค์ประกอบที่สืบทอดกับคลาส className

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }

ใช้ element.querySelector () สมมติว่า: 'myElement' เป็นองค์ประกอบหลักที่คุณมีอยู่แล้ว 'sonClassName' คือคลาสของเด็กที่คุณกำลังมองหา

let child = myElement.querySelector('.sonClassName');

สำหรับข้อมูลเพิ่มเติมโปรดไปที่: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

คุณสามารถลอง:

notes = doc.querySelectorAll('.4');

หรือ

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

สำหรับฉันดูเหมือนว่าคุณต้องการช่วงที่สี่ ในกรณีนี้คุณสามารถทำได้:

document.getElementById("test").childNodes[3]

หรือ

document.getElementById("test").getElementsByTagName("span")[3]

อันสุดท้ายนี้ช่วยให้มั่นใจได้ว่าไม่มีโหนดใด ๆ ที่ซ่อนอยู่ซึ่งอาจทำให้เกิดความสับสนได้

getElementsByClassNameแต่ทราบว่าเบราว์เซอร์เก่าไม่สนับสนุน

จากนั้นคุณสามารถทำได้

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

ดูเหมือนว่าจะใช้งานได้ แต่โปรดทราบว่าคลาส HTML

• ต้องขึ้นต้นด้วยตัวอักษร AZ หรือ az
• สามารถตามด้วยตัวอักษร (A-Za-z) ตัวเลข (0-9) ขีดกลาง ("-") และขีดล่าง ("_")

ใช้ชื่อรหัสโดยgetElementByIdไม่มี#เครื่องหมายนำหน้า จากนั้นคุณจะได้รับspanโหนดลูกโดยใช้getElementsByTagNameและวนซ้ำเพื่อค้นหาโหนดที่มีคลาสที่เหมาะสม:

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

การสาธิต: http://jsfiddle.net/Guffa/xB62U/

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

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

วิธีแก้ปัญหาของฉัน : (ดูตัวอย่างสดบน Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe )

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

โซลูชันที่ทันสมัย

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

เอกสาร

วิธีที่ฉันจะทำโดยใช้ jquery เป็นแบบนี้ ..

var targetchild = $ ("# test"). children (). find ("span.four");

นี่คือวิธีแก้ปัญหาแบบวนซ้ำที่ค่อนข้างง่าย ฉันคิดว่าการค้นหาแบบกว้างเป็นอันดับแรกเหมาะสมที่นี่ สิ่งนี้จะส่งคืนองค์ประกอบแรกที่ตรงกับคลาสที่พบ

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

คุณสามารถดึงข้อมูลคลาสหลักได้โดยเพิ่มบรรทัดด้านล่าง หากคุณมี id มันจะง่ายกว่าด้วยgetElementById. อย่างไรก็ตาม

var parentNode = document.getElementsByClassName("progress__container")[0];

จากนั้นคุณสามารถใช้querySelectorAllบน<div>พาเรนต์เพื่อดึงข้อมูลที่ตรงกันทั้งหมดdivกับคลาส.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAllจะดึงข้อมูลทุกอย่างdivด้วยคลาสของprogress__marker

อัปเดต ES6 ประจำเดือนมิถุนายน 2018

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

YUI2 มีการใช้งานข้ามเบราว์เซอร์ของgetElementsByClassName .

นี่คือวิธีที่ฉันทำโดยใช้ตัวเลือก YUI ขอบคุณคำแนะนำของ Hank Gay

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

โดยที่ four = classname, span = ประเภทองค์ประกอบ / ชื่อแท็กและ test = รหัสหลัก

ใช้YAHOO.util.Dom.getElementsByClassName()จากที่นี่