Вопрос по javascript – Что возвращают методы querySelectorAll и getElementsBy *?

103

ДелатьgetElementsByClassName (и аналогичные функции, такие какgetElementsByTagName а такжеquerySelectorAll) работают так же, какgetElementById или они возвращают массив элементов?

Я спрашиваю, потому что я пытаюсь изменить стиль всех элементов, используяgetElementsByClassName, Увидеть ниже.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';
Я понял, что для меня просто не имеет смысла, что вы не можете изменить все элементы с таким именем класса, используя приведенный выше код, вместо того, чтобы циклически перемещаться по массиву. JQuery способ гораздо лучше, мне просто интересно, JS способ dmo
Ключ, очень много, в названии:getElementsByClassName() подразумевает множественное число, тогда какgetElementById() подразумевает единичный элемент элемента. David Thomas
Может быть тоже полезно:stackoverflow.com/questions/3871547/… kapa

Ваш Ответ

9   ответов
4

/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name
8

ES6Error: User Rate Limit ExceededArray.from()Error: User Rate Limit Exceeded

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Error: User Rate Limit ExceededArray.from()Error: User Rate Limit Exceeded


Error: User Rate Limit ExceededjQuery.

$('.box').css({'background':'green'});
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box,'></div>

-1

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

125

getElementById() код работает, так как идентификаторы должны быть уникальными и, таким образом, функция всегда возвращает ровно один элемент (илиnull если ничего не было найдено).

Error: User Rate Limit ExceededgetElementsByClassName(), querySelectorAll()Error: User Rate Limit ExceededgetElementsBy*Error: User Rate Limit Exceeded

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

Если вы предпочитаете что-то более короткое, подумайте об использованииJQuery:

$('.myElement').css('size', '100px');
Error: User Rate Limit Exceeded<iframe>Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededquerySelectorAll()Error: User Rate Limit ExceededqSA(".myElement").forEach(el => el.style.size = "100px")Error: User Rate Limit ExceededqSA(".myElement", el => el.style.size = "100px")
4

You make that an Array as example

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  
11

:

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Tip: You can use the length property of the NodeList object to determine the number of elements with a specified class name, then you can loop through all elements and extract the info you want.

getElementsByClassName

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

var menuItems = document.getElementsByClassName('menuItem')<div>

<div>

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

4

document.querySelector('.myElement').style.size = '100px';

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
14

Вы используете массив как объект, разница междуgetElementbyId а также getElementsByClassNameError: User Rate Limit Exceeded

getElementbyId will return you an object. getElementsByClassName will return you an array. getElementsByClassName

The getElementsByClassName(classNames) method takes a string that contains an unordered set of unique space-separated tokens representing classes. When called, the method must return a live NodeList object containing all the elements in the document that have all the classes specified in that argument, having obtained the classes by splitting a string on spaces. If there are no tokens specified in the argument, then the method must return an empty NodeList.

Error: User Rate Limit Exceeded

getElementById

The getElementById() method accesses the first element with the specified id.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

в вашем коде строки:

1- document.getElementsByClassName('myElement').style.size = '100px';

Error: User Rate Limit ExceededNOT работать как положено, потому чтоgetElementByClassNameError: User Rate Limit ExceededNOT иметьstyleError: User Rate Limit ExceededelementError: User Rate Limit Exceeded

Error: User Rate Limit ExceededgetElementByIdError: User Rate Limit ExceededstyleError: User Rate Limit Exceeded

6

In Other Words

document.querySelector() selects only the first one element of the specified selector. So it doesn't spit out an array, it's a single value. Similar to document.getElementById() which fetches ID-elements only, since IDs have to be unique.

document.querySelectorAll() selects all elements with the specified selector and returns them in an array. Similar to document.getElementsByClassName() for classes and document.getElementsByTagName() tags only.


Why use querySelector?

Error: User Rate Limit Exceeded


Why use getElement/sBy?*

Error: User Rate Limit Exceeded


Why this performance difference?

Error: User Rate Limit ExceededNodeListError: User Rate Limit ExceededquerySelectorsError: User Rate Limit Exceeded
getElement/sBy*Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded


Infos

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы