getElementById JS: практическое руководство и примеры
<p>getElementById() является одним из наиболее часто используемых методов в JavaScript. Он позволяет получить элемент на веб-странице по его уникальному идентификатору и взаимодействовать с ним.</p>
<p>Синтаксис метода getElementById() выглядит следующим образом:</p>
<pre>document.getElementById("идентификатор");
</code></pre>
<p>Где "идентификатор" - это строка, содержащая значение атрибута id элемента, который вы хотите найти. Обратите внимание, что идентификаторы должны быть уникальными на странице.</p>
<p>Давайте рассмотрим некоторые примеры кода для более полного понимания этого метода.</p>
<pre><!-- Пример 1 -->
<div id="myDiv">Привет, мир!</div>
<script>
var element = document.getElementById("myDiv");
console.log(element.textContent); // Выведет "Привет, мир!"
</script>
<!-- Пример 2 -->
<ul id="myList">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
<script>
var list = document.getElementById("myList");
list.innerHTML += "<li>Элемент 4</li>";
</script>
<!-- Пример 3 -->
<input type="text" id="myInput">
<button id="myButton">Нажми меня</button>
<script>
var input = document.getElementById("myInput");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
var text = input.value;
alert("Вы ввели: " + text);
});
</script>
getElementById() является мощным инструментом для доступа и работы с элементами по идентификатору на веб-странице. Он позволяет получить доступ к элементам, изменять их содержимое, добавлять или удалять элементы, а также применять к ним различные действия и обработчики событий. Этот метод широко используется в разработке веб-приложений на JavaScript.</p>