Я пытаюсь получить дочерний диапазон, у которого есть класс = 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;
}
Мне кажется, что вам нужен четвертый пролет. Если это так, вы можете просто сделать это:
document.getElementById("test").childNodes[3]
или
document.getElementById("test").getElementsByTagName("span")[3]
Это последнее гарантирует, что нет никаких скрытых узлов, которые могли бы испортить его.
Вы можете попробовать:
notes = doc.querySelectorAll('.4');
или
notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) {
if (notes[i].getAttribute('class') == '4') {
}
}
Но имейте в виду, что старые браузеры не поддерживают 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
Используйте имя идентификатора с знаком getElementById, no # перед ним. Затем вы можете получить дочерние узлы 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);
}
На мой взгляд, каждый раз, когда вы можете, вы должны использовать Array и его методы. Они намного, намного быстрее, чем циклы по всей DOM/оболочке, или помещают вещи в пустой массив. Большинство решений, представленных здесь, вы можете назвать Naive, как описано здесь (отличная статья между прочим):
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
})
Используйте element.querySelector(). Предположим, что: myElement - родительский элемент, который у вас уже есть. "sonClassName" - это класс ребенка, которого вы ищете.
let child = myElement.querySelector('.sonClassName');
Для получения дополнительной информации посетите: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
Вот относительно простое рекурсивное решение. Я думаю, что здесь нужен поиск по ширине. Это вернет первый элемент, соответствующий найденному классу.
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;
}
То, как я буду делать это с помощью jquery, это что-то вроде этого.
var targetchild = $( "# test" ). children(). find ( "span.four" );
Обновление июнь 2018 года для ES6
const doc = document.getElementById('test');
let notes = null;
for (const value of doc) {
if (value.className === '4') {
notes = value;
break;
}
}
Предыдущий ответ обновлен до ES6
<div id="test">
<span class="es5">es5</span><span class="es6">es6</span>
</div>
let className = "es6"
let elemArray = Array.from(document.getElementById("test").childNodes)
elemArray
.filter(childNode => typeof childNode.className !== 'undefined')
.filter(childNode => childNode.className.includes(className) )
YUI2 имеет кросс-браузерную реализацию getElementsByClassName.
Вот как я это сделал с помощью селекторов YUI. Благодаря предложению Хэнка Гей.
notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');
где four = classname, span = имя типа элемента/тега и test = родительский идентификатор.
Используйте YAHOO.util.Dom.getElementsByClassName() из здесь.