Иногда пользователям необходимо манипулировать элементом HTML без изменения кода HTML. В этом случае пользователи могут использовать JavaScript для изменения элементов HTML без их перезаписи. Прежде чем мы перейдем к изменению HTML-элемента с помощью JavaScript, пользователи должны научиться обращаться к нему из DOM (объектной модели документа). Здесь DOM — это структура веб-страницы.
Из DOM пользователи могут получить доступ к HTML-элементам пятью различными способами в JavaScript.
- Получить HTML-элемент по идентификатору
- Получить HTML-элемент по имени класса
- Получить HTML-элемент по имени
- Получить HTML-элемент по тегу
- Получить HTML-элемент с помощью CSS-селектора
Ниже пользователи могут увидеть демонстрацию вышеуказанных методов с примерами кода.
Получение HTML-элемента по идентификатору: Как правило, большинство разработчиков используют уникальные идентификаторы во всем HTML-документе. Пользователь должен добавить идентификатор к конкретному HTML-элементу, прежде чем обращаться к HTML-элементу с этим идентификатором. Пользователи могут использовать метод getElementById() для доступа к HTML-элементу по идентификатору. Если какой-либо элемент не существует с переданным идентификатором в метод getElementById, он возвращает нулевое значение. Подробнее о том как обратиться к элементу css читайте на страницах специализированного сайта.
Синтаксис:
document.getElementById(element_ID);
Параметр: Он принимает идентификатор элемента, к которому пользователь хочет получить доступ.
Возвращаемое значение: возвращает объект с определенным идентификатором. Если элемент с определенным идентификатором не найден, он возвращает нулевое значение.
Пример: В этом примере демонстрируется использование метода getElementsById. Кроме того, он выводит внутренний HTML возвращаемого объекта в консоль браузера. Пользователи могут открыть консоль в веб-браузере Chrome, нажав ctrl + shift + I.
- HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- Heading element with GeeksforGeeks id--> <h1 id="Geeksforgeeks"> GeeksforGeeks </h1> <p>DOM getElementById() Method</p> <script> // Accessing the element by getElementById method let temp = document.getElementById("Geeksforgeeks"); console.log(temp); console.log(temp.innerHTML); </script></body></html> |
Вывод:
: Получение HTML-элемента по имени классаВ javascript метод getElementsByClassName() полезен для доступа к HTML-элементам с использованием className. Разработчики могут использовать одно имя класса несколько раз в конкретном HTML-документе. Когда пользователи пытаются получить доступ к элементу, используя className, он возвращает коллекцию всех объектов, которые включают определенный класс.
Синтаксис:
document.getElementsByClassName(element_classnames);
Параметр: Он принимает несколько имен классов элемента, к которому пользователь хочет получить доступ.
Возвращаемое значение: возвращает коллекцию объектов с определенным именем класса. Пользователи могут получить каждый элемент из объекта collection, используя индекс, начинающийся с 0.
Пример 1: В этом примере демонстрируется использование метода getElementsByClassName(). Он выводит каждый элемент возвращенного объекта collection в консоль. Пользователи могут открыть консоль в веб-браузере Chrome, нажав ctrl + shift + I.
- HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- Multiple html element with GeeksforGeeks class name --> <h1 class="GeeksforGeeks">GeeksforGeeks sample 1</h1> <h1 class="GeeksforGeeks">GeeksforGeeks sample 2</h1> <h1 class="GeeksforGeeks">GeeksforGeeks sample 3</h1> <p>DOM getElementsByclassName() Method</p> <script> // Accessing the element by getElementsByclassName method let temp = document.getElementsByClassName("GeeksforGeeks"); console.log(temp[0]); console.log(temp[1]); console.log(temp[2]); </script></body></html> |
Вывод:
Пример 2: Если конкретный элемент содержит более одного класса, пользователи могут получить к нему доступ, передав имена классов через пробел в качестве параметра метода. Пользователи могут открыть консоль в веб-браузере Chrome, нажав ctrl + shift + I.
- HTML
<!DOCTYPE html><html lang="en"><head> <title>Document</title></head><body> <!-- Multiple html element with GeeksforGeeks class name --> <h1 class="GeeksforGeeks geeks">GeeksforGeeks sample 1</h1> <h1 class="GeeksforGeeks">GeeksforGeeks sample 2</h1> <h1 class="GeeksforGeeks">GeeksforGeeks sample 3</h1> <p>DOM getElementsByclassName() Method</p> <script> // Accessing the element by getElementsByclassName // method with multiple class let temp = document.getElementsByClassName( "GeeksforGeeks geeks"); console.log(temp[0]); </script></body></html> |
Вывод:
: Получение HTML-элемента по имениВ javascript метод getElementsByName() полезен для доступа к HTML-элементам с использованием имени. Здесь название указывает на атрибут name HTML-элемента. Этот метод возвращает коллекцию HTML-элементов, которая включает конкретное имя. Пользователи могут получить длину коллекции, используя метод build-in length.