Bagaimana cara mendapatkan elemen anak berdasarkan nama kelas?

Saya mencoba untuk mendapatkan rentang anak yang memiliki kelas = 4. Berikut adalah contoh elemen:

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

Alat yang saya miliki adalah JS dan YUI2. Saya dapat melakukan sesuatu seperti ini:

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

//or

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

Ini tidak berfungsi di IE. Saya mendapatkan kesalahan bahwa objek (doc) tidak mendukung metode atau properti ini (getElementsByClassName). Saya sudah mencoba beberapa contoh implementasi lintas browser dari getElementsByClassName tapi saya tidak bisa membuatnya bekerja dan masih mendapatkan kesalahan itu.

Saya pikir apa yang saya butuhkan adalah browser lintas getElementsByClassName atau saya perlu menggunakan doc.getElementsByTagName ('span') dan loop melalui sampai saya menemukan kelas 4. Saya tidak yakin bagaimana melakukannya.

Gunakan doc.childNodesuntuk beralih melalui masing-masing span, dan kemudian filter yang classNamesama 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;
    }        
}

​

Gunakan querySelector dan querySelectorAll

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

IE9 dan yang lebih tinggi

;)

Jawaban yang diterima hanya memeriksa anak langsung. Seringkali kita mencari keturunan dengan nama kelas itu.

Juga, kadang-kadang kita menginginkan anak yang mengandung className.

Sebagai contoh: <div class="img square"></div>harus cocok dengan pencarian di className "img", meskipun itu benar className bukan "img".

Inilah solusi untuk kedua masalah ini:

Temukan instance pertama elemen turunan dengan kelas 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;
    }

Gunakan element.querySelector (). Mari kita asumsikan: 'myElement' adalah elemen induk yang sudah Anda miliki. 'sonClassName' adalah kelas anak yang Anda cari.

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

Untuk info lebih lanjut, kunjungi: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Kamu bisa mencoba:

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

atau

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

Bagi saya sepertinya Anda menginginkan rentang keempat. Jika demikian, Anda bisa melakukan ini:

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

atau

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

Yang terakhir ini memastikan bahwa tidak ada node tersembunyi yang dapat mengacaukannya.

Namun ketahuilah bahwa browser lama tidak mendukung getElementsByClassName.

Lalu, Anda bisa melakukannya

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

Tampaknya ini berfungsi, tetapi perlu diperhatikan bahwa kelas HTML

• Harus dimulai dengan surat: AZ atau az
• Dapat diikuti oleh huruf (A-Za-z), digit (0-9), tanda hubung ("-"), dan garis bawah ("_")

Gunakan nama id dengan getElementById, tanpa #tanda sebelum itu. Kemudian Anda bisa mendapatkan spansimpul anak menggunakan getElementsByTagName, dan loop melalui mereka untuk menemukan satu dengan kelas yang tepat:

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

Demo: http://jsfiddle.net/Guffa/xB62U/

Menurut pendapat saya, setiap kali Anda bisa, Anda harus menggunakan Array dan metodenya. Mereka jauh, jauh lebih cepat daripada perulangan seluruh DOM / pembungkus, atau mendorong barang ke array kosong. Sebagian besar solusi yang disajikan di sini Anda dapat menghubungi Naif seperti yang dijelaskan di sini (artikel hebat btw):

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

Solusi saya : (pratinjau langsung tentang 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
})

Cara saya akan melakukan ini menggunakan jquery adalah sesuatu seperti ini ..

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

Berikut ini adalah solusi rekursif yang relatif sederhana. Saya pikir pencarian luas-pertama cocok di sini. Ini akan mengembalikan elemen pertama yang cocok dengan kelas yang ditemukan.

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

Anda dapat mengambil kelas induk dengan menambahkan baris di bawah ini. Jika Anda memiliki id, akan lebih mudah dengan getElementById. Meskipun begitu,

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

Kemudian Anda dapat menggunakan querySelectorAllpada induk <div>untuk mengambil semua kecocokan divdengan kelas.progress__marker

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

querySelectorAllakan mengambil setiap divdengan kelasprogress__marker

Solusi modern

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

dokumentasi

Juni 2018 memperbarui ke ES6

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

YUI2 memiliki implementasi lintas browsergetElementsByClassName .

Ini adalah bagaimana saya melakukannya menggunakan penyeleksi YUI. Terima kasih atas saran Hank Gay.

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

di mana empat = classname, span = jenis elemen / nama tag, dan test = id induk.

Gunakan YAHOO.util.Dom.getElementsByClassName()dari sini .