Sınıf adına göre alt öğe nasıl elde edilir?

Sınıfı 4 olan çocuk aralığını elde etmeye çalışıyorum. İşte örnek bir öğe:

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

Elimdeki araçlar JS ve YUI2'dir. Bunun gibi bir şey yapabilirim:

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

//or

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

Bunlar IE'de çalışmaz. Nesnenin (doc) bu yöntemi veya özelliği (getElementsByClassName) desteklemediğine dair bir hata alıyorum. GetElementsByClassName'in tarayıcılar arası uygulamalarının birkaç örneğini denedim, ancak onları çalıştıramadım ve hala bu hatayı alıyorum.

Sanırım ihtiyacım olan şey tarayıcılar arası getElementsByClassName veya doc.getElementsByTagName ('span') kullanmam ve 4. sınıfı bulana kadar döngü yapmam gerekiyor. Yine de bunu nasıl yapacağımdan emin değilim.

doc.childNodesHer birini yinelemek spanve ardından classNameeşit olanı filtrelemek için kullanın 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 ve querySelectorAll kullanma

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

IE9 ve üstü

;)

Kabul edilen cevap yalnızca acil çocukları kontrol eder. Çoğu zaman bu sınıf adına sahip herhangi bir torun arıyoruz.

Ayrıca, bazen bir className içeren herhangi bir çocuğu isteriz .

Örneğin: tam<div class="img square"></div> olarak className "img" olmasa da, className "img" üzerindeki bir aramayla eşleşmelidir .

İşte bu sorunların her ikisi için bir çözüm:

Sınıfla birlikte bir alt öğenin ilk örneğini bulun 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 () kullanın. Farz edelim: 'myElement' zaten sahip olduğunuz ana öğe. 'sonClassName', aradığınız çocuğun sınıfıdır.

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

Daha fazla bilgi için şu adresi ziyaret edin: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Deneyebilirsin:

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

veya

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

Bana göre dördüncü açıklığı istiyorsun. Öyleyse, şunu yapabilirsiniz:

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

veya

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

Bu sonuncusu, onu bozabilecek herhangi bir gizli düğüm olmamasını sağlar.

Ancak eski tarayıcıların desteklemediğini unutmayın getElementsByClassName.

O zaman yapabilirsin

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

Görünüşe göre işe yarıyor, ancak bir HTML sınıfının

• Bir harfle başlamalıdır: AZ veya az
• Ardından harfler (A-Za-z), rakamlar (0-9), kısa çizgiler ("-") ve alt çizgiler ("_") gelebilir

Kimliğin adını, önünde işaret getElementByIdyok ile kullanın #. Ardından spanalt düğümleri getElementsByTagNamekullanabilir ve doğru sınıfa sahip olanı bulmak için bunlardan geçebilirsiniz:

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/

Bana göre, yapabildiğiniz her seferinde Array ve yöntemlerini kullanmalısınız. Tüm DOM / sarmalayıcı üzerinden döngüden veya boş diziye bir şeyler göndermekten çok, çok daha hızlıdırlar. Burada sunulan çözümlerin çoğuna burada açıklandığı gibi Naive diyebilirsiniz (harika makale btw):

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

Çözümüm : (Codepen canlı önizleme: 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
})

Bunu jquery kullanarak yapmamın yolu şöyle bir şey ..

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

İşte nispeten basit bir özyinelemeli çözüm. Bence burada kapsamlı bir arama uygun. Bu, bulunan sınıfla eşleşen ilk öğeyi döndürür.

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

Aşağıdaki satırı ekleyerek üst sınıfı getirebilirsiniz. Bir kimliğin olsaydı, daha kolay olurdu getElementById. Her şeye rağmen,

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

Ardından , sınıfla eşleşen tüm e-postaları getirmek querySelectorAlliçin üst <div>öğe üzerinde kullanabilirsiniz .div.progress__marker

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

querySelectorAlldivsınıfıyla her şeyi getirecekprogress__marker

Modern çözüm

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

belgeleme

Haziran 2018 ES6 güncelleştirmesi

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

YUI2'nin çapraz tarayıcı uygulaması vardırgetElementsByClassName .

YUI seçicilerini kullanarak bunu nasıl yaptım. Hank Gay'in önerisi sayesinde.

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

burada dört = sınıf adı, span = öğe türü / etiket adı ve test = üst kimlik.

Kullanın YAHOO.util.Dom.getElementsByClassName()dan burada .