GetElementById: примеры (JAVASCRIPT)

Простые примеры использования

Получение элемента и изменение его содержимого

// HTML: <div id="header">Старый заголовок</div>
const element = document.getElementById('header');
element.textContent = 'Новый заголовок';

// Результат: содержимое div с id="header" изменено.

Проверка существования элемента

const element = document.getElementById('notExist');
if (element) {
    console.log('Элемент найден');
} else {
    console.log('Элемент не найден'); // Сработает это
}

// Результат в консоли: 'Элемент не найден'

Альтернативные методы выбора в JavaScript

document.querySelector() — универсальный метод, принимающий CSS-селектор. Возвращает первый найденный элемент. Предпочтителен для сложных селекторов.

document.querySelectorAll() — возвращает NodeList всех элементов, соответствующих селектору. Используется при работе с группами элементов.

document.getElementsByClassName() — возвращает HTMLCollection элементов по имени класса. Быстрее, чем querySelectorAll, для выборки по классу.

document.getElementsByTagName() — возвращает HTMLCollection элементов по имени тега. Эффективен для выборки всех элементов определённого типа.

Распространённые ошибки

Обращение до полной загрузки DOM

<script>
    // Скрипт выполняется до построения DOM
    const elem = document.getElementById('myId'); // elem = null
</script>
<div id="myId"></div>

Решение — размещать скрипт перед закрывающим тегом </body> или использовать событие DOMContentLoaded.

Использование несуществующего или опечатка в идентификаторе

<div id="content"></div>
<script>
    const elem = document.getElementById('contnt'); // Опечатка
    elem.style.color = 'red'; // Ошибка: elem is null
</script>

История изменений

Метод getElementById() был стандартизирован в спецификации DOM Level 1 и с тех пор его сигнатура остаётся неизменной. Основные изменения касаются производительности и интеграции с современными API, например, возвращаемое значение стало строго Element или null.

В современных браузерах метод работает идентично для HTML- и XML-документов, что было не всегда одинаково в ранних реализациях.

Расширенные примеры

Динамическое изменение структуры

// HTML: <ul id="list"><li>Пункт 1</li></ul>
const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = 'Пункт 2';
list.appendChild(newItem);

// В список добавлен новый элемент li.

Использование в обработчиках событий

<button id="btn">Нажми</button>
<div id="output"></div>
<script>
    document.getElementById('btn').addEventListener('click', function() {
        document.getElementById('output').textContent = 'Кнопка нажата';
    });
</script>

Работа с формами

// HTML: <input id="email" type="email">
const emailField = document.getElementById('email');
// Получение и установка значения
console.log(emailField.value);
emailField.value = 'test@example.com';

Интеграция с системой шаблонов

// HTML: <template id="row"><tr><td></td></tr></template>
const template = document.getElementById('row');
const clone = template.content.cloneNode(true);
clone.querySelector('td').textContent = 'Данные';
document.querySelector('tbody').appendChild(clone);

Аналоги в других языках программирования

Python (библиотека Beautiful Soup)

# Установка: pip install beautifulsoup4
from bs4 import BeautifulSoup

html = '<div id="content">Текст</div>'
soup = BeautifulSoup(html, 'html.parser')
element = soup.find(id="content")
print(element.text)  # Текст

Текст

PHP (DOMDocument)

$html = '<div id="content">Текст</div>';
$dom = new DOMDocument();
@$dom->loadHTML($html);
$element = $dom->getElementById('content');
echo $element->nodeValue; // Текст

Текст

C# (в контексте WebDriver для тестирования)

// Использование Selenium WebDriver
IWebElement element = driver.FindElement(By.Id("content"));
string text = element.Text;