Як отримати дочірній елемент за назвою класу?

Я намагаюся отримати дочірній проміжок, який має клас = 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 і верхні

;)

Прийнята відповідь перевіряє лише безпосередніх дітей. Часто ми шукаємо будь-яких нащадків з таким ім'ям класу.

Крім того, іноді ми хочемо, щоб будь-яка дитина, яка містить класне ім’я.

Наприклад: <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 / обгортці або переміщення матеріалів у порожній масив. Більшість представлених тут рішень ви можете назвати Naive, як описано тут (чудова стаття 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
})

Те, як я буду робити це за допомогою jquery, є щось подібне ..

var targetchild = $ ("# test"). діти (). 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;
}

Ви можете отримати батьківський клас, додавши рядок нижче. Якби у вас був ідентифікатор, було б простіше getElementById. Тим не менш,

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

Тоді ви можете використовувати querySelectorAllна батьківській програмі <div>для отримання всіх відповідних divs класу.progress__marker

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

querySelectorAllзнайде кожного divз класуprogress__marker

Сучасне рішення

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

документація

Оновлення червня 2018 року до ES6

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

YUI2 має крос-браузерну реалізаціюgetElementsByClassName .

Ось як я це зробив за допомогою селекторів YUI. Завдяки пропозиції Хенка Гей.

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

де four = ім'я класу, span = тип елемента / назва тегу та test = батьківський ідентифікатор.

Використовуйте YAHOO.util.Dom.getElementsByClassName()з тут .