В различни ситуации програмистите трябва да получат HTML елемента чрез атрибута name. Да предположим, че разработчикът иска да получи достъп до контрола на формуляр, като бутон за избор или поле за отметка, за да прочете или манипулира стойността му. По-конкретно, „ име ” Атрибутът се използва за групиране на свързани контроли на формуляри и едно и също име може да бъде предоставено на много контроли, позволявайки достъп до тях като една група.
Тази публикация ще илюстрира методите за извличане на HTML елемент по име в JavaScript.
Как да получите елементи по име в JavaScript?
В JavaScript можете да получите достъп до HTML елемент, като използвате неговия атрибут name с помощта на следните предварително дефинирани JavaScript методи:
-
- метод getElementsByName().
- querySelectorAll() Метод
Метод 1: Вземете елемент по име с помощта на метода „getElementsByName()“.
За да получите HTML елемента по име, използвайте „ getElementsByName() ” метод. Този метод дава колекция от елементи, които имат посочения атрибут име.
Синтаксис
Следният синтаксис се използва за метода getElementsByName():
document.getElementsByName ( „име“ )
Пример
Първо създайте шест бутона. Пет от тях имат „ име ' атрибут, който се използва за получаване на HTML елемента ' бутон ”. Прикачете събитието onclick с шестия бутон, който ще извика „ applyStyle() ” за стилизиране на петте бутона:
< бутон име = 'btn' > Бутон бутон >< бутон име = 'btn' > Бутон бутон >
< бутон име = 'btn' > Бутон бутон >
< бутон име = 'btn' > Бутон бутон >
< бутон име = 'btn' > Бутон бутон > < бр >< бр >
< бутон при натискане = 'applyStyle()' > Натисни тук бутон >
Дефинирайте функция ' applyStyle() ”, който ще се задейства при натискане на бутон и ще промени цвета на фона на всички бутони. За да направите това, първо вземете всички „ бутон ” като група чрез извикване на „ getElementsByName() ” метод:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Както можете да видите в резултата, докато щракнете върху бутона, цветът на фона на петте бутона ще бъде променен:
Метод 2: Вземете елемент по име с помощта на метода „querySelectorAll()“.
Можете също да използвате „ querySelectorAll() ” за получаване на елементи с помощта на „ име ” в JavaScript. Този метод се използва за извличане на всички елементи в документ, които съответстват на определен селектор/атрибут, като CSS клас, идентификатор или име.
Синтаксис
Даденият синтаксис се използва за получаване на елемента по име с помощта на „ querySelectorAll()” метод:
document.querySelectorAll ( '[]' ) ;
Пример
В следващия пример ще променим цвета само на онези бутони, чието име е „ btn1 ”:
< див >< име на бутона = 'btn' > Бутон бутон >
< име на бутона = 'btn1' > Бутон бутон >
< име на бутона = 'btn' > Бутон бутон >
< име на бутона = 'btn1' > Бутон бутон >
< име на бутона = 'btn' > Бутон бутон > < бр >< бр >
< бутон при натискане = 'applyStyle()' > Натисни тук бутон >
див >
В дефинираната функция ще извикаме първи достъп до всички елементи на бутоните, чието име е „ btn1 ” и след това приложете стил върху него:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'cadetblue' ;
} ) ;
}
Даденият изход означава, че само два бутона са променили цвета на фона си, чието име е „btn1“:
Забележка: Ако искате да получите един елемент, препоръчително е да използвате document.querySelector вместо document.querySelectorAll.
Заключение
За получаване или извличане на елемент по име използвайте „ getElementsByName() ' или ' querySelectorAll() ” методи. Най-често и ефективно използваният метод за получаване на елемента по име е методът „getElementsByName()“. Тази публикация илюстрира методите за извличане на HTML елемент по име в JavaScript.