В этом руководстве будет описана процедура поиска элемента DOM на основе любого значения атрибута.
Как найти/получить элемент в DOM на основе значения атрибута?
Чтобы найти элемент в DOM на основе значения атрибута, используйте « селектор запросов() метод. Он дает первый элемент, найденный в документе, который соответствует заданному значению селектора CSS.
Примечание : чтобы получить все элементы, соответствующие указанному значению селектора, используйте « ЗапросСелекторВсе() метод.
Синтаксис
Для использования метода «querySelector()» используйте следующий синтаксис:
документ. селектор запросов ( селектор ) ;
Здесь селектор будет идентификатором или классом, как « #идентификатор », « .сорт ”:
Вы также можете использовать данный синтаксис для поиска элемента на основе значения атрибута:
документ. селектор запросов ( '[селектор='значение']' ) ;
В приведенном выше синтаксисе « селектор ' будет ' идентификатор ' или ' сорт ', или ' ценить ' будет ' имя_идентификатора ' или ' className ».
Пример
В файле HTML создайте элемент div, который содержит заголовок с использованием элемента h4, обычный текст с использованием тега и div для сообщения с назначенным идентификатором « сообщение ”:
< идентификатор div '=' 'див' стиль '=' 'выравнивание текста: по центру;' >< h4 сорт '=' 'сек' идентификатор '=' 'заголовок' > Найдите Элемент в DOM на основе Атрибут Ценить h4 >
< идентификатор диапазона '=' 'добро пожаловать' > Добро пожаловать в линуксинт охватывать >
< идентификатор div '=' 'сообщение' >
< идентификатор p '=' 'сообщение' > Привет ребята ! Добро пожаловать в учебники Linuxhint JavaScript п >
див >
див >
Страница будет выглядеть следующим образом:
Теперь мы получим элемент, где идентификатор « сообщение ” назначается с помощью “ селектор запросов() метод:
каждый элемент '=' документ. селектор запросов ( '#сообщение' )Наконец, выведите элемент на консоль:
консоль. бревно ( элемент ) ;В выводе « див » элемент отображается с присвоенным ему идентификатором « сообщение ”, что указывает на то, что требуемый элемент был успешно получен:
Вы также можете получить элемент, используя данный синтаксис. Здесь мы получим элемент с идентификатором « сообщение ”:
каждый элемент '=' документ. селектор запросов ( '[id='сообщение']' ) ;Выход
Теперь обновите его цвет, используя « стиль ' свойство:
элемент. стиль . цвет '=' 'синий' ;Как видите, текст был в « зеленый ', и теперь он был обновлен до ' синий ”:
Это все о поиске элемента в DOM на основе значения атрибута.
Заключение
Для поиска элемента в DOM на основе значения атрибута используйте « селектор запросов() », который дает первый элемент в документе, который соответствует указанному значению селектора CSS. Более того, чтобы получить все элементы, соответствующие указанному значению селектора, используйте « ЗапросСелекторВсе() метод. В этом руководстве описана процедура поиска элемента DOM на основе любого значения атрибута.