Що повертають методи querySelectorAll та getElementsBy *?

Чи getElementsByClassName(і подібні функції, як getElementsByTagNameі querySelectorAll) працюють так само, getElementByIdчи вони повертають масив елементів?

Причина, яку я прошу, полягає в тому, що я намагаюся змінити стиль усіх елементів, що використовують getElementsByClassName. Дивись нижче.

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

//works
document.getElementById('myIdElement').style.size = '100px';

Ваш getElementById()код працює, оскільки ідентифікатори повинні бути унікальними, тому функція завжди повертає рівно один елемент (або nullякщо жодного не було знайдено).

Однак getElementsByClassName(), querySelectorAll()і інші getElementsBy*методи повертають масив, як набір елементів. Повторіть його, як і з реальним масивом:

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

Якщо ви віддаєте перевагу щось коротше, подумайте про використання jQuery :

$('.myElement').css('size', '100px');

Ви використовуєте масив як об'єкт, різниця між getElementbyIdі getElementsByClassNameполягає в тому, що:

• getElementbyIdповерне об'єкт Element або null, якщо не знайдено жодного елемента з ідентифікатором
• getElementsByClassNameповерне живий HTMLCollection , можливо, довжиною 0, якщо не знайдено відповідних елементів

getElementsByClassName

getElementsByClassName(classNames)Метод приймає рядок , яка містить невпорядкований набір унікальних розділених пробілами лексем , що представляють класи. При виклику метод повинен повернути живий NodeListоб'єкт, що містить усі елементи в документі, у яких є всі класи, зазначені в цьому аргументі, отримавши класи, розділивши рядок на пробіли. Якщо в аргументі немає лексем, то метод повинен повернути порожній NodeList.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

Метод getElementById () отримує доступ до першого елемента із вказаним ідентифікатором.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

у вашому коді рядки:

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

НЕ буде працювати, як очікувалося, оскільки getElementByClassNameмасив поверне масив, а масив НЕ матиме styleвластивість, ви можете отримати доступ до кожного element, повторивши їх.

Ось чому функція getElementByIdпрацювала для вас, ця функція поверне прямий об’єкт. Тому ви зможете отримати доступ до styleвласності.

На цій сторінці взято наступне опис :

Метод getElementsByClassName () повертає колекцію всіх елементів у документі із вказаним іменем класу як об’єкт NodeList.

Об'єкт NodeList являє собою сукупність вузлів. До вузлів можна отримати доступ за номерами індексу. Індекс починається з 0.

Порада: Ви можете скористатися властивістю довжини об'єкта NodeList для визначення кількості елементів із вказаним іменем класу, після чого ви зможете переглядати всі елементи та витягувати потрібну інформацію.

Отже, як параметр getElementsByClassNameбуде прийнято ім'я класу.

Якщо це ваше тіло HTML:

<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>s, оскільки вони відповідають заданому імені класу.

Потім ви можете повторити <div>колекцію цих вузлів ( у цьому випадку) за допомогою:

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

Детальніше про відмінності між елементами та вузлами див. У цій публікації .

ES6 забезпечує Array.from()метод, який створює новий екземпляр масиву з об’єкта, подібного до масиву або ітерабельного.

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>

Як ви бачите всередині фрагмента коду, після використання Array.from()функції ви зможете маніпулювати над кожним елементом.

Те саме рішення з використанням jQuery.

$('.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>

Іншими словами

• document.querySelector()вибирає лише перший один елемент зазначеного селектора. Таким чином, він не випльовує масив, це єдине значення. Подібно до того, document.getElementById()що отримує лише ID-елементи, оскільки ідентифікатори повинні бути унікальними.

• document.querySelectorAll()вибирає всі елементи із зазначеним селектором та повертає їх у масив. Подібно лише document.getElementsByClassName()до класів і document.getElementsByTagName()тегів.

Навіщо використовувати querySelector?

Він використовується лише з метою простоти і стислості.

Навіщо використовувати getElement / sBy? *

Швидше виконання.

Чому така різниця в продуктивності?

Обидва способи вибору мають на меті створити NodeList для подальшого використання. querySelectors генерує статичний NodeList з селекторами, таким чином його слід спочатку створити з нуля.
getElement / sBy * негайно адаптує існуючий живий NodeList поточного DOM.

Отже, коли використовувати метод, який залежить від вас / вашого проекту / вашого пристрою.

Інформація

Демонстрація всіх методів
Тест продуктивності документації NodeList

Він повертає список, схожий на масив.

Ви зробите цей масив як приклад

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

Ви можете отримати один елемент, запустивши

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

але це буде працювати для першого елемента з класом .myElement.

Якщо ви хочете застосувати це для всіх елементів класу, я пропоную вам використовувати

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

/*
 * 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

З ES5 + (будь-який перегляд сьогодні - 2017) ви повинні мати можливість

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

Відповідь на конкретний випадок Дрензі ...

Ви можете створити функцію, яка працюватиме для будь-якого з wordелементів і передаватиме номер того, який ви хочете перетворити, наприклад:

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}

<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>