В этой статье представлена процедура получения идентификатора элемента привязки внутри элемента списка в JavaScript.
Как получить идентификатор привязки внутри элемента списка в JavaScript?
Атрибут ID элемента — это уникальный идентификатор, который можно использовать для управления этим элементом и его использования в функции JavaScript. Пользователи могут получить элемент, используя его идентификатор, различными способами. Однако получить идентификатор элемента HTML может быть сложно. Однако получить атрибут ID элемента HTML может быть немного сложно.
Аналогично, в случае анкерных элементов внутри « Элемент списка », пользователь не может напрямую вызвать элемент привязки и получить его идентификатор, поскольку в списке будет несколько элементов привязки. Для этой ситуации приведенная ниже демонстрация показывает, как получить идентификатор элемента Anchor внутри элемента списка:
< HTML >
< тело >
< делитель >
< ул идентификатор '=' 'список' >
< что >
< а идентификатор '=' 'якорь1' href '=' '#' > Анкерный элемент 1 < / а >
< / что >
< что >
< а идентификатор '=' 'якорь2' href '=' '#' > Анкерный элемент 2 < / а >
< / что >
< что >
< а идентификатор '=' 'якорь3' href '=' '#' > Якорный элемент 3 < / а >
< / что >
< / ул >
< / делитель >
< п > Нажмите кнопку ниже, чтобы получить идентификаторы элементов привязки из приведенного выше списка! < / п >
< кнопка по щелчку '=' 'мояФункция()' > Получить идентификаторы < / кнопка >
< п идентификатор '=' 'корень' >< / п >
< сценарий >
функция myFunction() {
let listItems = document.querySelectorAll('#list a[id]');
для (пусть я = 0; я < listItems.length; я++ ) {
позволять идентификатор '=' списокItems [ я ] . идентификатор ;
документ.getElementById ( 'корень' ) .innerHTML + '='
'Идентификатор якорного элемента' + ( я + 1 ) + ' является: ' + идентификатор + '
';
}
}
< / сценарий >
< / тело >
< / HTML >
Объяснение приведенного выше кода следующее:
- Неупорядоченный список с идентификатором « список ” создается и содержится внутри “ <дел> » теги.
- Внутри элементов списка создаются три тега привязки, которым присваиваются идентификаторы « якорь1 ', ' якорь2 ', и ' якорь3 ' соответственно.
- Далее « <р> ” элемент создан и содержит текстовое содержимое.
- Далее создается элемент кнопки с использованием метода « <кнопка> » теги. « по щелчку() Атрибут кнопки предоставляется функцией под названием « мояФункция() ».
- Пустой» <р> ”элемент с идентификатором” для ' создано.
- Далее внутри « <скрипт> », функция с именем « мояФункция() ' создано.
- Внутри функции константа с именем « списокItems ' создано.
- Эта константа предоставляется с идентификаторами всех элементов привязки с помощью « документ.querySelectorAll() метод. Этот метод предоставляется с идентификатором списка и запросом « помогать] ».
- Затем ' для Цикл ” создается для прохода по циклу “ списокItems ' постоянный.
- Идентификаторы элементов привязки затем печатаются вместо « п ”элемент с идентификатором” для ». Это делается с помощью функции « document.getElementById().innerHTML метод.
Выход:
Из приведенного ниже вывода видно, что элементы привязки присутствуют в списке, и пользователь может получить их идентификаторы, нажав кнопку « Получить идентификаторы ' кнопка.
Это все, что касается получения идентификаторов элементов привязки внутри элементов списка.
Заключение
Чтобы получить идентификатор элемента привязки внутри элемента списка, встроенный JavaScript « документ.querySelectorAll() »Можно использовать метод. Кроме того, полученные идентификаторы этих элементов привязки можно распечатать на веб-странице с помощью встроенного JavaScript. .innerHTML() метод. В этой статье представлена процедура получения идентификатора элемента привязки внутри элемента списка в JavaScript.