Как обратиться к классу в javascript
Чтобы получить имя класса html-элемента, достаточно обратиться к свойству className этого элемента. Оно позволяет задать класс и получить его имя. Также можно задать несколько классов разделяя их пробелами. Кроме этого свойства есть ещё свойство classList , которое предоставляет разные методы по работе с классами.
const div1 = document.createElement('div'); div1.className = 'foo'; console.log(div1.outerHTML); // => console.log(div1.className); // => foo const div2 = document.createElement('div'); div2.className = 'foo bar'; console.log(div2.outerHTML); // => console.log(div2.className); // => foo bar const div3 = document.createElement('div'); div3.classList.add('foo'); console.log(div3.outerHTML); // => console.log(div3.classList); // => DOMTokenList ['foo', value: 'foo'] const div4 = document.createElement('div'); div4.classList.add('foo', 'bar', 'baz'); console.log(div4.outerHTML); // => console.log(div4.classList); // => DOMTokenList(3) ['foo', 'bar', 'baz', value: 'foo bar baz'] Element: свойство classList
Element.classList — это доступное только для чтения свойство, которое содержит текущую коллекцию DOMTokenList всех атрибутов class элемента.
Использование classList представляет более удобный способ, чем доступ к списку классов элемента в виде строки, разделенной пробелами, через element.className .
Значение
DOMTokenList представляет содержимое атрибута class элемента. Если атрибут class не установлен или пуст, то будет возвращён пустой DOMTokenList , то есть DOMTokenList со свойством length равным 0 .
Хотя само свойство classList доступно только для чтения, можно изменять связанный с ним DOMTokenList с помощью методов add() (en-US), remove() (en-US), replace() и toggle() (en-US).
Для проверки, содержит ли элемент какой-либо класс можно использовать метод classList.contains() (en-US).
Примеры
const div = document.createElement("div"); div.className = "foo"; // Начальное состояние: console.log(div.outerHTML); // Используем classList API для удаления и добавления классов div.classList.remove("foo"); div.classList.add("anotherclass"); // console.log(div.outerHTML); // Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавлен div.classList.toggle("visible"); // Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументом div.classList.toggle("visible", i 10); // false console.log(div.classList.contains("foo")); // Добавление или удаление нескольких классов сразу div.classList.add("foo", "bar", "baz"); div.classList.remove("foo", "bar", "baz"); // Добавление или удаление нескольких классов с использованием spread-синтаксиса const cls = ["foo", "bar"]; div.classList.add(. cls); div.classList.remove(. cls); // Замена класса "foo" классом "bar" div.classList.replace("foo", "bar");
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-element-classlist① |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- element.className
- DOMTokenList
- classList.js (кросс-браузерный полифил, реализующий функциональность element.classList )
Поиск: getElement*, querySelector*
Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы?
Для этого в DOM есть дополнительные методы поиска.
document.getElementById или просто id
Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.
Также есть глобальная переменная с именем, указанным в id :
…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:
Пожалуйста, не используйте такие глобальные переменные для доступа к элементам
Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.
Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.
В этом учебнике мы будем обращаться к элементам по id в примерах для краткости, когда очевидно, откуда берётся элемент.
В реальной жизни лучше использовать document.getElementById .
Значение id должно быть уникальным
Значение id должно быть уникальным. В документе может быть только один элемент с данным id .
Если в документе есть несколько элементов с одинаковым значением id , то поведение методов поиска непредсказуемо. Браузер может вернуть любой из них случайным образом. Поэтому, пожалуйста, придерживайтесь правила сохранения уникальности id .
Только document.getElementById , а не anyElem.getElementById
Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.
querySelectorAll
Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.
Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.
Псевдоклассы тоже работают
Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.
querySelector
Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.
Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.
matches
Предыдущие методы искали по DOM.
Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .
Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.
. . closest
Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.
Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.
Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.
getElementsBy*
Существуют также другие методы поиска элементов по тегу, классу и так далее.
На данный момент, они скорее исторические, так как querySelector более чем эффективен.
Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.
- elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав «*» вместо тега, можно получить всех потомков.
- elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
- document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.
// получить все элементы div в документе let divs = document.getElementsByTagName('div');Давайте найдём все input в таблице:
Ваш возраст:
let inputs = table.getElementsByTagName('input'); for (let input of inputs) Не забываем про букву «s» !
Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .
Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.
Возвращает коллекцию, а не элемент!
Другая распространённая ошибка – написать:
// не работает document.getElementsByTagName('input').value = 5;Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.
Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:
// работает (если есть input) document.getElementsByTagName('input')[0].value = 5;Ищем элементы с классом .article :
Живые коллекции
Все методы «getElementsBy*» возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.
В приведённом ниже примере есть два скрипта.
- Первый создаёт ссылку на коллекцию . На этот момент её длина равна 1 .
- Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – 2 .
First div Second div Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :
First div Second div Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.
Итого
Есть 6 основных методов поиска элементов в DOM:
| Метод | Ищет по. | Ищет внутри элемента? | Возвращает живую коллекцию? |
| querySelector | CSS-selector | ✔ | — |
| querySelectorAll | CSS-selector | ✔ | — |
| getElementById | id | — | — |
| getElementsByName | name | — | ✔ |
| getElementsByTagName | tag or ‘*’ | ✔ | ✔ |
| getElementsByClassName | class | ✔ | ✔ |
Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.
- Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
- Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.
И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:
- elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .
Задачи
Поиск элементов
важность: 4
Вот документ с таблицей и формой.
- Таблицу с id=»age-table» .
- Все элементы label внутри этой таблицы (их три).
- Первый td в этой таблице (со словом «Age»).
- Форму form с именем name=»search» .
- Первый input в этой форме.
- Последний input в этой форме.
Откройте страницу table.html в отдельном окне и используйте для этого браузерные инструменты разработчика.
Есть много путей как это сделать.
// 1. Таблица с `id="age-table"`. let table = document.getElementById('age-table') // 2. Все label в этой таблице table.getElementsByTagName('label') // или document.querySelectorAll('#age-table label') // 3. Первый td в этой таблице table.rows[0].cells[0] // или table.getElementsByTagName('td')[0] // или table.querySelector('td') // 4. Форма с name="search" // предполагаем, что есть только один элемент с таким name в документе let form = document.getElementsByName('search')[0] // или, именно форма: document.querySelector('form[name="search"]') // 5. Первый input в этой форме form.getElementsByTagName('input')[0] // или form.querySelector('input') // 6. Последний input в этой форме let inputs = form.querySelectorAll('input') // найти все input inputs[inputs.length-1] // взять последнийElement.className
Свойство className отвечает за значение атрибута class элемента.
Примечание: Кстати, у className есть большой брат. Его зовут element.classList — более мощный и функциональный метод для работы с классами элемента.
Синтаксис
var cName = elem.className; elem.className = cName;
- cName — строка. Если нужно указать несколько классов, они указываются через пробел.
Пример
var elm = document.querySelector("div"); alert(elm.className); //"booble example" elm.className = "class1 class2 class3"; alert(elm.className); //"class1 class2 class3"
Примечание: ##### Примечание:Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным*.*
Совместимость с браузерами
BCD tables only load in the browser