Работают ли getElementsByClassName
(и аналогичные функции, такие как getElementsByTagName
и querySelectorAll
) так же, как getElementById
или они возвращают массив элементов?
Причина, по которой я спрашиваю, заключается в том, что я пытаюсь изменить стиль использования всех элементов getElementsByClassName
. Увидеть ниже.
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
getElementsByClassName()
подразумевает множественное число, тогда какgetElementById()
подразумевает единичный элемент элемента.Ответы:
Ваш
getElementById()
код работает, поскольку идентификаторы должны быть уникальными, и поэтому функция всегда возвращает ровно один элемент (или,null
если ни один не был найден).Однако
getElementsByClassName()
,querySelectorAll()
и другиеgetElementsBy*
методы возвращают массив, как набор элементов. Выполните итерацию по нему, как с реальным массивом:Если вы предпочитаете что-то более короткое, подумайте об использовании jQuery :
источник
<iframe>
что также является частью вашего доменаquerySelectorAll()
и вы сможете получить хороший короткий код без большой зависимости от старой школы.qSA(".myElement").forEach(el => el.style.size = "100px")
Может быть, чтобы обертка получила обратный звонок.qSA(".myElement", el => el.style.size = "100px")
Вы используете массив как объект, разница между
getElementbyId
иgetElementsByClassName
заключается в том, что:getElementbyId
вернет объект Element или ноль, если элемент с идентификатором не найденgetElementsByClassName
вернет живой HTMLCollection , возможно, длины 0, если не найдено подходящих элементовgetElementsByClassName
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname
getElementById
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
в вашем коде строки:
НЕ будет работать так, как ожидалось, поскольку
getElementByClassName
он вернет массив, а массив НЕ будет иметьstyle
свойства, кelement
которому вы можете обращаться , перебирая их.Вот почему функция
getElementById
работает для вас, эта функция будет возвращать прямой объект. Поэтому вы сможете получить доступ кstyle
собственности.источник
Следующее описание взято с этой страницы :
Итак, в качестве параметра
getElementsByClassName
будет принято имя класса.Если это ваше тело HTML:
затем
var menuItems = document.getElementsByClassName('menuItem')
вернет коллекцию (не массив) из трех верхних<div>
s, поскольку они соответствуют заданному имени класса.Затем вы можете перебрать эту
<div>
коллекцию узлов ( в данном случае) с помощью:Пожалуйста, обратитесь к этому сообщению для получения дополнительной информации о различиях между элементами и узлами.
источник
for (var menuItemIndex = 0 ; menuItemIndex < menuItems.length ; menuItemIndex ++) {
на мой взгляд.ES6 предоставляет
Array.from()
метод, который создает новый экземпляр Array из массива или повторяемого объекта.Как вы можете видеть внутри фрагмента кода, после использования
Array.from()
функции вы можете манипулировать каждым элементом.То же решение с использованием
jQuery
.источник
Другими словами
document.querySelector()
выбирает только первый один элемент из указанного селектора. Так что это не выплевывает массив, это одно значение. Аналогично тому,document.getElementById()
что выбирает только ID-элементы, так как идентификаторы должны быть уникальными.document.querySelectorAll()
Выбирает все элементы с указанным селектором и возвращает их в массиве. Аналогично толькоdocument.getElementsByClassName()
для классов иdocument.getElementsByTagName()
тегов.Зачем использовать querySelector?
Он используется исключительно с целью простоты и краткости.
Зачем использовать getElement / sBy? *
Быстрее производительность.
Почему эта разница в производительности?
Оба способа выбора имеют целью создание NodeList для дальнейшего использования. querySelectors генерирует статический NodeList с селекторами, поэтому он должен быть сначала создан с нуля.
getElement / Sby * немедленно адаптирует существующий действующий NodeList текущего DOM.
Итак, когда использовать какой метод зависит от вас / вашего проекта / вашего устройства.
Информация
Демо всех методов
NodeList Документация
Тест производительности
источник
Возвращает список, похожий на массив.
Вы делаете этот массив как пример
источник
Вы можете получить один элемент, запустив
но это будет работать для первого элемента с классом .myElement.
Если вы хотите применить это для всех элементов класса, я предлагаю вам использовать
источник
источник
С ES5 + (любой просмотр в настоящее время - 2017) вы должны быть в состоянии сделать
источник
Ответ на конкретный случай Дрензии ...
Вы можете создать функцию, которая будет работать для любого из
word
элементов и передавать номер того, который вы хотите преобразовать, например:источник