Как обратиться к классу в css через js
Перейти к содержимому

Как обратиться к классу в css через js

  • автор:

Поиск: 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 :

 
Long article

Живые коллекции

Все методы «getElementsBy*» возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом ниже примере есть два скрипта.

  1. Первый создаёт ссылку на коллекцию . На этот момент её длина равна 1 .
  2. Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – 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

Вот документ с таблицей и формой.

  1. Таблицу с id=»age-table» .
  2. Все элементы label внутри этой таблицы (их три).
  3. Первый td в этой таблице (со словом «Age»).
  4. Форму form с именем name=»search» .
  5. Первый input в этой форме.
  6. Последний 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] // взять последний

Как в JavaScript обратиться к конкретному элементу по классу [дубликат]

Есть к примеру код. Как по клику, допустим, на блок «Кнопка 3» обратится именно к ней? В jQuery это будет выглядеть так:

$('.test').click(function() < $(this).addClass('active'); >)
.active
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

А как такого же результата добиться с помощью чистого JavaScript? Вариант, к примеру, querySelectorAll(‘.test’)[2] не подходит: мы заранее не знаем сколько элементов на странице и на какой конкретно будет произведено нажатие

Отслеживать
81.2k 9 9 золотых знаков 78 78 серебряных знаков 136 136 бронзовых знаков
задан 19 дек 2019 в 11:05
Stupid_Pink_Pony Stupid_Pink_Pony
439 4 4 серебряных знака 7 7 бронзовых знаков
Минусы на ответах не мои.
– user256824
21 дек 2019 в 10:12
Я тоже минусы не ставила. Варианты meine и AlexDevTime, помогли, спасибо
21 дек 2019 в 10:21

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

При большом количестве элементом не нужно их перебирать в цикле или forEach. Для этого существует делегирование событий, когда на их общий родительский элемент ставится обработчик, а определяется на какой именно кликнули элемент по event.target

 
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
const parent = document.getElementById('parent'); parent.onclick = function(event) < let target = event.target; // где был клик? // можем проверить ту да ли мы кликнули в if // а потом сделать какое-то действие с event.target >; 

Document.getElementsByClassName()

Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имён классов. В случае вызова по отношению к объекту ‘document’, поиск происходит по всему документу, включая корневой элемент. Вызывать getElementsByClassName() можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.

Синтаксис

var elements = document.getElementsByClassName(names); // или: var elements = rootElement.getElementsByClassName(names);
  • В «elements» будет текущая HTMLCollection найденных элементов.
  • «names» — строка, состоящая из списка имён искомых классов; имена классов разделяют пробелами.
  • getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. («document»). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.

Примеры

Получить все элементы класса ‘test’:

.getElementsByClassName("test"); 

Получить все элементы, для которых заданы класс ‘red’ и класс ‘test’:

.getElementsByClassName("red test"); 

Получить все элементы класса ‘test’, являющиеся дочерними для элемента с ID ‘main’:

.getElementById("main").getElementsByClassName("test"); 

Мы также можем использовать методы из Array.prototype по отношению к любой HTMLCollection , передавая коллекцию в качестве значения this метода. Код в примере найдёт все элементы ‘div’ с классом ‘test’:

var testElements = document.getElementsByClassName("test"); var testDivs = Array.prototype.filter.call( testElements, function (testElement)  return testElement.nodeName === "DIV"; >, ); 

Получение элементов класса ‘test’

Ниже приведён пример наиболее употребительного способа использования данного метода.

doctype html> html> head> meta charset="UTF-8" /> title>Documenttitle> head> body> div id="parent-id"> p>hello word1p> p class="test">hello word2p> p>hello word3p> p>hello word4p> div> script> var parentDOM = document.getElementById("parent-id"); var test = parentDOM.getElementsByClassName("test"); //test is not target element console.log(test); //HTMLCollection[1] var testTarget = parentDOM.getElementsByClassName("test")[0]; //hear , this element is target console.log(testTarget); //

hello word2

script> body> html>

Спецификации

Specification
DOM Standard
# ref-for-dom-document-getelementsbyclassname①

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как обратиться к классу в 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'] 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *