САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Что? Где? Куда? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Объекты дат JS Формат дат JS Метод получения дат JS Метод набора дат JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ к объекту Конструкторы объекта Прототипы объекта ES5 Методы объекта

JS Функции

Определение функции Параметры функции Вызов функции Вызвать функцию Применение функции Закрытие функции

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Прослушиватель событий DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX XML Файл AJAX PHP Файл AJAX ASP Файл AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввода JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


Спасибо за поддержку, сайт продолжает работать

JavaScript HTML DOM Элементы



На этой странице вы узнаете, как находить элементы HTML на странице HTML и обращаться к ним.


Поиск элементов HTML

Часто с помощью JavaScript вы хотите манипулировать элементами HTML.

Для этого вам нужно сначала найти элементы. Есть несколько способов сделать это:

  • Поиск элементов HTML по идентификатору
  • Поиск элементов HTML по имени тега
  • Поиск элементов HTML по имени класса
  • Поиск элементов HTML с помощью селекторов CSS
  • Поиск элементов HTML по коллекциям объектов HTML

Поиск элемента HTML по идентификатору

Самый простой способ найти HTML элемент в DOM - использовать идентификатор элемента.

В этом примере выполняется поиск элемента с id="intro":

Пример

var myElement = document.getElementById("intro");
Попробуйте сами »

Если элемент найден, метод вернет элемент как объект (в myElement).

Если элемент не найден, myElement будет содержать null.


Поиск элементов HTML по имени тега

Этот пример находит все элементы <p>:

Пример

var x = document.getElementsByTagName("p");
Попробуйте сами »

Этот пример находит элемент с id="main", а затем находит все <p> элементы внутри "main":

Пример

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Попробуйте сами »


Поиск элементов HTML по имени класса

Если вы хотите найти все элементы HTML с одинаковым именем класса, используйте getElementsByClassName().

В этом примере возвращается список всех элементов с class="intro".

Пример

var x = document.getElementsByClassName("intro");
Попробуйте сами »

Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.


Поиск элементов HTML с помощью селекторов CSS

Если вы хотите найти все элементы HTML, соответствующие указанному селектору CSS (идентификатор, имена классов, типы, атрибуты, значения атрибутов и т.д.), используйте этот метод querySelectorAll() method.

В этом примере возвращается список всех <p> элементов с class="intro".

Пример

var x = document.querySelectorAll("p.intro");
Попробуйте сами »

Этот querySelectorAll() метод не работает в Internet Explorer 8 и более ранних версиях.


Поиск HTML элементов по коллекциям HTML объектов

В этом примере выполняется поиск элемента формы с id="frm1", в коллекции форм и отображение всех значений элементов:

Пример

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Попробуйте сами »

Также доступны следующие HTML объекты (и коллекции объектов):


Проверьте себя с помощью упражнений

Упражнение:

Используйте этот getElementById метод, чтобы найти <p> элемент и изменить его текст на "Hello".

<p id="demo"></p>
<script>
 = "Hello";
</script>

Старт