JS метод Document.getElementById()

Загальний опис

Метод getElementById() є одним із основних та найчастіше використовуваних методів в об'єктній моделі документа (DOM) мови програмування JavaScript. Як випливає з назви, цей метод дозволяє отримати доступ до елемента веб-сторінки за унікальним ідентифікатором (ID), який призначений елементу у вигляді атрибуту. Важливість методу полягає у його здатності швидко знаходити елементи, що дозволяє розробникам легко маніпулювати цими елементами, змінювати їх властивості, стилі, вміст та слухати події, що відбуваються з ними. Цей метод є незамінним у реалізації інтерактивності веб-сторінок, створенні динамічних веб-додатків та управлінні DOM.

Щоб використати getElementById(), необхідно викликати його на об'єкті document, передаючи як аргумент рядок, що відповідає ідентифікатору елемента у HTML-документі. Результатом виклику методу буде об'єкт, що представляє знайдений елемент. Якщо елемент з вказаним ідентифікатором не знайдено, метод поверне null.

Ось приклад простого використання getElementById() для зміни вмісту елемента:

document.getElementById('myElement').textContent = 'Новий текст елемента';

У цьому прикладі, метод getElementById() знаходить елемент з ідентифікатором myElement і змінює його текстовий вміст на "Новий текст елемента". Це демонструє базовий прийом маніпуляції з DOM.

Важливо розуміти, що ідентифікатори в HTML-документі повинні бути унікальними. Це означає, що використання getElementById() завжди повертає лише один елемент або null, якщо елемент не знайдено. Ця унікальність ідентифікаторів дозволяє точно адресувати елементи та ефективно управляти ними через JavaScript.

Застосування getElementById() може бути різноманітним: від зміни стилів елементів на сторінці до додавання обробників подій для реагування на дії користувача. Наприклад, змінюючи стилі, можна легко змінити вигляд елемента:

document.getElementById('myElement').style.color = 'red';

Тут метод змінює колір тексту елемента на червоний. Це показує, як за допомогою getElementById() можна динамічно змінювати властивості стилів елементів.

Додавання обробників подій дозволяє створювати інтерактивний користувацький досвід. За допомогою getElementById(), можливо отримати доступ до елемента і назначити йому обробник події:

document.getElementById('myButton').addEventListener('click', function() {
  alert('Кнопка натиснута!');
});

У цьому фрагменті коду елемент з ідентифікатором myButton отримує обробник події, що активується на подію "click" (натиск миші) і виводить сповіщення. Це підкреслює важливість getElementById() для створення інтерактивних елементів на веб-сторінці.

Порада:

Використовуйте метод getElementById() для динамічного доступу та модифікації елементів. Цей метод дозволяє змінювати вміст, стилі, атрибути та інші властивості елемента в реальному часі. Наприклад, щоб змінити текст в елементі, спершу отримайте доступ до нього за допомогою getElementById(), а потім використайте властивість textContent для встановлення нового тексту.

document.getElementById("myElement").textContent = "Новий текст";

Порада:

Використовуйте getElementById() для оптимізації взаємодії з формами. Отримавши доступ до елементів форми за допомогою цього методу, ви можете легко зчитувати або змінювати їх значення. Це особливо корисно при валідації даних форми перед її відправленням.

let userName = document.getElementById("username").value;
if (userName.length < 4) {
    alert("Ім'я користувача повинно містити мінімум 4 символи.");
}

Порада:

Запам'ятайте, що метод getElementById() є частиною об'єкта document і може бути використаний лише з документами HTML. Якщо вам потрібно працювати з елементами в межах XML документів, розгляньте використання методів, таких як querySelector() або getElementsByTagName(), які пропонують більш широкі можливості для взаємодії з різними типами документів.

Синтаксис

getElementById(id)

Параметри

*id: Ідентифікатор елемента, який потрібно знайти. Ідентифікатор є рядком, чутливим до регістру, який є унікальним у межах документа; лише один елемент повинен мати будь-який заданий ідентифікатор.

Return

element: Повертає об'єкт Element, який описує елемент DOM, що відповідає вказаному ідентифікатору, або null, якщо у документі не знайдено елемента з таким ідентифікатором. Тип даних результату - об'єкт або null, залежно від того, чи існує елемент з заданим ідентифікатором у документі.

Переглядачі

Переглядач
	1	1	1	7	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

Цей приклад демонструє основний спосіб використання getElementById() для отримання доступу до елементів на веб-сторінці та зміни їх вмісту через JavaScript. Користувачі можуть взаємодіяти зі сторінкою, натискаючи на кнопки, щоб змінювати текст повідомлення.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExMJeQW">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо метод getElementById() для зміни тексту HTML-елемента. Цей метод дозволяє отримати доступ до елемента за його унікальним ідентифікатором (ID). Це основний та найпростіший спосіб маніпуляції з елементами на сторінці, який є вкрай корисним при динамічній зміні вмісту сторінки без перезавантаження.

<!DOCTYPE html>
<html>
<head>
    <title>Приклад зміни тексту</title>
</head>
<body>
    <p id="demo">Це прикладовий текст.</p>
    <button onclick="changeText()">Змінити текст</button>

    <script>
        function changeText() {
            // Отримуємо елемент за ID
            var element = document.getElementById("demo");
            // Змінюємо текст елемента
            element.innerHTML = "Текст було змінено!";
        }
    </script>
</body>
</html>

У цьому складнішому прикладі метод getElementById() використовується для управління відображенням елементів на сторінці. Ми можемо динамічно змінювати стилі елементів, наприклад, їх видимість. Це важлива техніка для створення інтерактивних веб-сторінок, де користувач може керувати вмістом без необхідності перезавантаження сторінки.

<!DOCTYPE html>
<html>
<head>
    <title>Приховування та відображення елементів</title>
</head>
<body>
    <div id="hiddenText" style="display: none;">
        Цей текст спочатку прихований.
    </div>
    <button onclick="toggleVisibility()">Показати/Приховати текст</button>

    <script>
        function toggleVisibility() {
            // Отримуємо елемент за ID
            var element = document.getElementById("hiddenText");
            // Перевіряємо, чи елемент прихований
            if (element.style.display === "none") {
                // Якщо так, робимо його видимим
                element.style.display = "block";
            } else {
                // В іншому випадку, приховуємо його
                element.style.display = "none";
            }
        }
    </script>
</body>
</html>

JS довідник

JavaScript

Наповнення JS розділу

JS метод Document.getElementById()

Загальний опис

Синтаксис

Параметри

Return

Переглядачі

Приклади