Как найти элемент на странице с определенным атрибутом зная только атрибут?

285
29 декабря 2017, 02:06

Дамы и господа, допустим есть некий элемент на странице и он нам не известен... Это может быть div, span или p и так далее... Как можно найти этот элемент зная только его Attribute. Метод который я ниже привел не дал ни каких результатов... Получаю null. Единственный вариант которым я чего-то добился это общепринятый и всеми известны, это variant_3, который меня не интересует...

var bodyChildren = document.body.children; 
var wrapper = document.getElementById('wrapper'); 
 
for (var i = 0; i < bodyChildren.length; i++) { 
  var variant_0 = bodyChildren[i].getAttribute('scrollWrap'); 
  var variant_1 = bodyChildren[i].getAttribute('id'); 
} 
 
var variant_2 = wrapper.getAttribute('scrollWrap'); 
 
var variant_3 = wrapper.getAttribute('id'); 
 
console.log('variant_0 ' + variant_0); 
console.log('variant_1 ' + variant_1); 
console.log('variant_2 ' + variant_2); 
console.log('variant_3 ' + variant_3); 
variant_3.className = 'variant_3'; 
 
console.log(wrapper);
<div id="wrapper" scrollWrap></div>

Answer 1

Находит первый элемент с заданным атрибутом.

var ell = document.querySelector("*[scrollWrap]"); 
console.log(ell);
<div id="wrapper1">hi man</div> 
<div id="wrapper2" scrollWrap>hallow</div> 
<div id="wrapper3">hi</div>

Находит все элементы с заданным атрибутом

var elements = document.querySelectorAll("*[scrollWrap]"); 
for (var el of elements) { 
  console.log(el); 
}
<div id="wrapper1">hi man</div> 
<div id="wrapper2" scrollWrap>hallow 1</div> 
<div id="wrapper3">hi</div> 
<div id="wrapper4" scrollWrap>hallow 2</div>

Answer 2

var e = document.querySelectorAll('*[scrollWrap]'); 
 
for (var i = 0; i < e.length; i++) { 
  console.log(e[i]); 
}
<div id="wrapper1" scrollWrap></div> 
<div id="wrapper2"></div> 
<div id="wrapper3" scrollWrap></div> 
<div id="wrapper4" title></div>

Answer 3

Варианты 0 и 1 дают null, потому, что Вы в цикле пробегаете по всем элементам, а нужно прерывать цикл, когда нашли нужный элемент

Вариант 2 работает вполне адекватно. Он возвращает значение атрибута в виде пустой строки "", что логично. Запись

<div id="wrapper" scrollWrap></div>

эквивалентна

<div id="wrapper" scrollWrap=""></div>

А вообще, как советуют в соседних ответах, для этой задачи нужно использовать querySelector / querySelectorAll

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10