В этом руководстве будут показаны различные методы выбора элементов DOM в JavaScript.
Какие существуют способы выбора элементов DOM в JavaScript?
Используйте следующие методы для выбора элементов DOM в JavaScript:
- Метод getElementById()
- Метод getElementsByClassName()
- Метод getElementsByTagName()
- метод селектора запросов()
- метод querySelectorAll()
Способ 1: выберите элементы DOM с помощью метода «getElementById()»
Для выбора элементов DOM используйте « получитьэлемент по идентификатору() », основанный на присвоенном элементу идентификаторе. Этот метод выбирает один элемент по его уникальному « идентификатор атрибут. Он дает ссылку на элемент с указанным идентификатором и возвращает « нулевой », если соответствующий элемент не найден.
Синтаксис
Используйте приведенный ниже синтаксис для метода getElementById():
документ. получитьэлементбиид ( 'идентификатор' )
Здесь « имя_идентификатора ” — это имя атрибута id, присвоенного элементу.
Пример
В файле HTML создайте два заголовка в элементе div, используя « h4 ' ярлык. Назначьте идентификаторы элементу div и элементам заголовков «h4» с именем « див ' и ' заголовок ', соответственно. Добавьте атрибут стиля к элементу div, чтобы выровнять его по центру. Кроме того, назначьте класс « раздел » ко второму заголовку, который меняет свой цвет:
< див идентификатор '=' 'див' стиль '=' 'выравнивание текста: по центру;' >< h4 идентификатор '=' 'заголовок' > Доступ к элементам DOM с использованием различных методов < / h4 >
< h4 сорт '=' 'раздел' идентификатор '=' 'заголовок' > Выберите элементы DOM в JavaScript, используя метод getElementById()
< / h4 >
< / див >
Теперь мы получим « див », используя присвоенный ему идентификатор с помощью « получитьэлемент по идентификатору() метод:
был получить по идентификатору '=' документ. получитьэлементбиид ( 'див' ) ;Распечатайте элемент против идентификатора « див » в консоли:
консоль. бревно ( получить по идентификатору ) ;Видно, что требуемый HTML-элемент успешно получен:
Способ 2: выбор элементов DOM с помощью метода «getElementsByClassName()»
Вы также можете выбрать элемент DOM, используя назначенный ему класс, с помощью « getElementsByClassName() метод. Он выбирает список элементов по имени их класса. Он выводит живой объект HTMLCollection, объект, подобный массиву, который содержит все элементы с указанным именем класса.
Синтаксис
Для метода «getElementsByClassName()» используется следующий синтаксис:
документ. getElementsByClassName ( «имя класса» )Пример
Здесь мы получим элемент, содержащий класс « раздел » и вывести в консоль:
был получить по классу '=' документ. getElementsByClassName ( 'раздел' ) ;консоль. бревно ( получить по классу ) ;
Как вы можете видеть в выводе, возвращен массив длины 1, который содержит элемент « h4 'кто принадлежит к классу' раздел ”:
Способ 3: выбор элементов DOM с помощью метода «getElementsByTagName()»
Если элементу не присвоен идентификатор или класс, используйте « getElementsByTagName() ”, чтобы получить элемент по имени его тега. Он также возвращает активный объект HTMLCollection, который представляет собой массивоподобный объект, содержащий все элементы с указанным именем тега.
Синтаксис
Следуйте приведенному синтаксису для выбора элементов на основе имени тега:
getElementsByTagName ( название тэга )Пример
Вызовите метод «getElementsByTagName()», передав имя тега « h4 ». Затем выведите в консоли список элементов, соответствующих указанному имени тега:
был получить по тегу '=' документ. getElementsByTagName ( 'ч4' ) ;консоль. бревно ( получить по тегу ) ;
Выход
Способ 4: выбор элементов DOM с помощью метода «querySelector()»
Использовать ' селектор запросов() », чтобы получить элемент DOM. Он выбирает один элемент, соответствующий указанному селектору CSS. Он возвращает первый соответствующий элемент, найденный в документе. Если ни один элемент не соответствует, он дает « нулевой ».
Синтаксис
Приведенный ниже синтаксис используется для метода «querySelector()»:
документ. селектор запросов ( атрибут )Здесь атрибут представляет собой селектор CSS, такой как идентификатор или класс, например « #мой ID ” “ .мои занятия “.
Пример
Вызовите метод «querySelector()» и передайте идентификатор « #заголовок », чтобы получить элементы с одинаковым идентификатором:
был getByquery '=' документ. селектор запросов ( '#заголовок' ) ;консоль. бревно ( getByquery ) ;
Он дает первый совпадающий элемент в качестве вывода:
Способ 5: выбор элементов DOM с помощью метода «querySelectorAll()»
Если вы хотите выбрать все элементы, которые содержат указанный атрибут (id или класс), используйте « ЗапросСелекторВсе() метод. Он выбирает список элементов, которые соответствуют определенному определенному селектору CSS. Он дает объект NodeList, содержащий все элементы в документе, соответствующие конкретному селектору CSS.
Синтаксис
Используйте следующий синтаксис для получения списка элементов:
документ. querySelectorAll ( атрибут )Пример
Чтобы получить список совпадающих элементов, содержащих идентификатор « заголовок ” с “ ЗапросСелекторВсе() ” и напечатайте элементы на консоли:
был getByqueryAll '=' документ. querySelectorAll ( '#заголовок' ) ;консоль. бревно ( getByqueryAll ) ;
Выход
Это все, что касается выбора элементов DOM в JavaScript.
Заключение
Для выбора элементов DOM в JavaScript используйте « получитьэлемент по идентификатору() », « getElementsByClassName() », « getElementsByTagName() », « селектор запросов() ', или ' ЗапросСелекторВсе() метод. Эти методы предоставляют различные способы выбора элементов из DOM на основе их уникальных идентификаторов, имен классов, имен тегов или селекторов CSS. В этом руководстве продемонстрированы различные методы выбора элементов DOM в JavaScript.