Какви са различните начини за избор на DOM елементи в JavaScript

Този урок ще демонстрира различните методи за избиране на DOM елементи в JavaScript.

Какви са различните начини за избор на DOM елементи в JavaScript?

Използвайте следните методи за избор на DOM елементи в JavaScript:

• getElementById() метод
• getElementsByClassName() метод
• getElementsByTagName() метод
• метод querySelector().
• метод querySelectorAll().

Метод 1: Изберете DOM елементи с помощта на метода „getElementById()“.

За избор на DOM елементи използвайте „ getElementById() ” въз основа на присвоения идентификатор на елемента. Този метод избира единичен елемент чрез неговия уникален „ документ за самоличност ' атрибут. Дава препратка към елемента с посочения идентификатор и връща „ нула ”, ако не бъде намерен съответстващ елемент.

Синтаксис

Използвайте дадения по-долу синтаксис за метода getElementById():

Тук „ idName ” е името на атрибут id, присвоен на елемент.

Пример

В HTML файл създайте две заглавия в елемент div, като използвате „ h4 ” таг. Присвояване на идентификатори на елемента div и заглавия „h4“ елементи с име „ див ' и ' заглавие ”, съответно. Добавете атрибута style към елемента div, за да го подравните в центъра. Освен това задайте клас „ раздел ” към второто заглавие, което променя цвета си:

Сега ще получим „ див ' елемент, използвайки присвоения му идентификатор с помощта на ' getElementById() ” метод:

Отпечатайте елемента срещу id ' див ” на конзолата:

Може да се види, че необходимият HTML елемент е успешно извлечен:

Метод 2: Изберете DOM елементи с помощта на метода „getElementsByClassName()“

Можете също да изберете DOM елемента, като използвате присвоения му клас с помощта на „ getElementsByClassName() ” метод. Той избира списък с елементи по името на класа им. Той извежда жив обект HTMLCollection, обект, подобен на масив, който съдържа всички елементи с указаното име на клас.

Синтаксис

Следният синтаксис се използва за метода „getElementsByClassName()“:

Пример

Тук ще получим елемента, който съдържа класа „ раздел ” и отпечатайте на конзолата:

Както можете да видите в изхода, върнат масив с дължина 1, който съдържа елемент „ h4 ' който принадлежи към класа ' раздел ”:

Метод 3: Изберете DOM елементи с помощта на метода „getElementsByTagName()“

В случай че няма идентификатор или клас, присвоен на елемент, използвайте „ getElementsByTagName() ”, за да получите елемента по името на етикета му. Той също така връща активен обект HTMLCollection, който е подобен на масив обект, който съдържа всички елементи, които имат указаното име на етикет.

Синтаксис

Следвайте дадения синтаксис за избор на елементи въз основа на име на етикет:

Пример

Извикайте метода „getElementsByTagName()“, като подадете името на маркера „ h4 ”. След това отпечатайте списъка с елементи, който съответства на указаното име на етикет на конзолата:

Изход

Метод 4: Изберете DOM елементи с помощта на метода „querySelector()“.

Използвай ' querySelector() ”, за да получите DOM елемента. Той избира един елемент, който съответства на определен CSS селектор. Връща първия съответстващ елемент, открит в документа. Ако няма съвпадение на елемент, дава „ нула ”.

Синтаксис

Споменатият по-долу синтаксис се използва за метода „querySelector()“:

Тук атрибутът е CSS селектор, като id или клас като „ #myId ” “ .Моят клас “.

Пример

Извикайте метода „querySelector()“ и подайте идентификатора „ #заглавие ”, за да получите елементите, които съдържат същия идентификатор:

Той дава първия съответстващ елемент като изход:

Метод 5: Изберете DOM елементи с помощта на метода „querySelectorAll()“.

Ако искате да изберете всички елементи, които съдържат посочения атрибут (id или клас), използвайте „ querySelectorAll() ” метод. Той избира списък от елементи, които съответстват на конкретен дефиниран CSS селектор. Той дава обект NodeList, който съдържа всички елементи в документа, които съответстват на конкретния CSS селектор.

Синтаксис

Използвайте следния синтаксис за получаване на списъка с елементи:

Пример

За да получите списъка със съвпадащия елемент, който съдържа идентификатора „ заглавие ” с „ querySelectorAll() ” и отпечатайте върху елементи на конзолата:

Изход

Това е всичко за избирането на DOM елементи в JavaScript.

Заключение

За да изберете DOM елементите в JavaScript, използвайте „ getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', или ' querySelectorAll() ” метод. Тези методи предоставят различни начини за избор на елементи от DOM въз основа на техните уникални идентификатори, имена на класове, имена на етикети или CSS селектори. Този урок демонстрира различните методи за избиране на DOM елементи в JavaScript.