Элементы HTML DOM на JavaScript

Эта глава расскажет вам, как находить и обращаться к HTML-элементам на странице.

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

Обычно, через JavaScript, вам нужно работать с HTML-элементами.

Чтобы достичь этой цели, вам нужно сначала найти эти элементы. Есть несколько способов выполнить эту задачу:

  • Поиск элементов через id
  • Поиск элементов через имя тега
  • Поиск элементов через класс
  • Поиск HTML-элементов через CSS-селектор
  • Поиск элементов через набор HTML-объектов

Поиск элементов через id

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

Этот пример ищет элемент с id="intro":

Пример

var myElement = document.getElementById("intro");

Попробуйте сами

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

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

Поиск элементов через имя тега

Этот пример ищет все <p> Элемент:

Пример

var x = document.getElementsByTagName("p");

Попробуйте сами

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

Пример

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Попробуйте сами

Поиск элементов через класс

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

Этот пример возвращает список всех элементов, содержащих класс "intro":

Пример

var x = document.getElementsByClassName("intro");

Попробуйте сами

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

Поиск HTML-элементов через CSS-селектор

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

Этот пример возвращает все элементы с классом "intro" <p> Список элементов:

Пример

var x = document.querySelectorAll("p.intro");

Попробуйте сами

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

Найти HTML объект через селектор HTML объекта

Этот пример находит элемент form с id="frm1" в наборе forms и показывает все значения элементов:

Пример

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 объекты (и объектные наборы) также доступны: