У различитим ситуацијама, програмери треба да добију ХТМЛ елемент по атрибуту наме. Претпоставимо да програмер жели да приступи контроли обрасца, као што је радио дугме или поље за потврду, да би прочитао или манипулисао њеном вредношћу. Тачније, „ име ” атрибут се користи за груписање повезаних контрола обрасца и исто име се може дати многим контролама, омогућавајући им да им се приступи као једној групи.
Овај пост ће илустровати методе за преузимање ХТМЛ елемента по имену у ЈаваСцрипт-у.
Како добити елементе по имену у ЈаваСцрипт-у?
У ЈаваСцрипт-у можете приступити ХТМЛ елементу користећи његов атрибут наме уз помоћ следећих унапред дефинисаних ЈаваСцрипт метода:
-
- гетЕлементсБиНаме() Метод
- куериСелецторАлл() Метод
Метод 1: Добијте елемент по имену помоћу методе „гетЕлементсБиНаме()“.
Да бисте добили ХТМЛ елемент по имену, користите „ гетЕлементсБиНаме() ” метод. Овај метод даје колекцију елемената који имају наведени атрибут имена.
Синтакса
Следећа синтакса се користи за метод гетЕлементсБиНаме():
доцумент.гетЕлементсБиНаме ( 'име' )
Пример
Прво направите шест дугмади. Пет од њих има „ име ” атрибут који се користи за добијање ХТМЛ елемента “ дугме ”. Приложите догађај онцлицк помоћу шестог дугмета које ће позвати „ апплиСтиле() ” функција за стилизовање пет дугмади:
< дугме име = 'бтн' > Дугме дугме >< дугме име = 'бтн' > Дугме дугме >
< дугме име = 'бтн' > Дугме дугме >
< дугме име = 'бтн' > Дугме дугме >
< дугме име = 'бтн' > Дугме дугме > < бр >< бр >
< дугме онцлицк = 'апплиСтиле()' > Кликните овде дугме >
Дефинишите функцију ' апплиСтиле() ” који ће се покренути при клику на дугме и променити боју позадине свих дугмади. Да бисте то урадили, прво набавите све „ дугме ” елементе као групу позивањем „ гетЕлементсБиНаме() ” метод:
цонст бтнс = доцумент.гетЕлементсБиНаме ( 'бтн' ) ;
бтнс.форЕацх ( бтн = > {
бтн.стиле.бацкгроунд = 'цадетблуе' ;
} ) ;
}
Као што можете видети у излазу док кликнете на дугме, боја позадине пет дугмади ће се променити:
Метод 2: Добијте елемент по имену помоћу методе „куериСелецторАлл()“.
Такође можете користити „ куериСелецторАлл() ” метод за добијање елемената коришћењем „ име ” атрибут у ЈаваСцрипт-у. Овај метод се користи за преузимање свих елемената у документу који одговарају одређеном селектору/атрибуту као што је ЦСС класа, ид или име.
Синтакса
Дата синтакса се користи за добијање елемента по имену помоћу „ куериСелецторАлл()” метод:
доцумент.куериСелецторАлл ( '[наме='н1']' ) ;
Пример
У следећем примеру, променићемо боју само оних дугмади чије је име „ бтн1 ”:
< див >< име дугмета = 'бтн' > Дугме дугме >
< име дугмета = 'бтн1' > Дугме дугме >
< име дугмета = 'бтн' > Дугме дугме >
< име дугмета = 'бтн1' > Дугме дугме >
< име дугмета = 'бтн' > Дугме дугме > < бр >< бр >
< дугме онцлицк = 'апплиСтиле()' > Кликните овде дугме >
див >
У дефинисаној функцији, прво ћемо позвати приступ свим елементима дугмета чије је име „ бтн1 ” а затим примените стил на њега:
цонст бтнс = доцумент.куериСелецторАлл ( '[наме='бтн1']' ) ;
бтнс.форЕацх ( бтн = > {
бтн.стиле.бацкгроунд = 'цадетблуе' ;
} ) ;
}
Дати излаз означава да су само два дугмета променила боју позадине чије је име „бтн1“:
Белешка: Ако желите да добијете један елемент, препоручује се да користите доцумент.куериСелецтор уместо доцумент.куериСелецторАлл.
Закључак
За добијање или преузимање елемента по имену, користите „ гетЕлементсБиНаме() ' или ' куериСелецторАлл() ” методе. Метода која се најчешће и најефикасније користи за добијање елемента по имену је метода „гетЕлементсБиНаме()“. Овај пост је илустровао методе за преузимање ХТМЛ елемента по имену у ЈаваСцрипт-у.