Различные способы доступа к HTML-элементам с помощью JavaScript

Иногда пользователям необходимо манипулировать элементом 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.