DOM учебник
Начало работы с DOM

замечания

Версии

Получение существующих элементов html

Одной из наиболее распространенных задач является извлечение существующего элемента из DOM для управления. Чаще всего эти методы выполняются в document , потому что это корневой узел, но все эти методы работают с любым элементом HTML в дереве. Они будут возвращать только дети из узла, на котором он выполняется.

Получить по идентификатору

var element = document.getElementById("logo");

element будет содержать element (only), который имеет свой атрибут id установленный в «логотип», или содержит null если такой элемент не существует. Если существует несколько элементов с этим идентификатором, документ недействителен, и все может произойти.

Получить по имени тега

var elements = document.getElementsByTagName("a");

elements будут содержать живой HTMLCollection (объект, подобный массиву) всех тегов ссылок в документе. Эта коллекция синхронизируется с DOM, поэтому любые изменения, внесенные в DOM, отражаются в этой коллекции. Коллекция обеспечивает произвольный доступ и имеет длину.

var element = elements[0];
//Alternative
element = elements.item(0);

element содержит первый встреченный элемент HTML-ссылки или null если индекс за пределами границ

var length = elements.length;

length равно количеству элементов HTML-ссылки, которые в данный момент находятся в списке. Это число может измениться при изменении DOM.

Получить по классу

var elements = document.getElementsByClassName("recipe");

elements будут содержать живой HTMLCollection (объект, подобный массиву) всех элементов, где их атрибут class включает в себя «рецепт». Эта коллекция синхронизируется с DOM, поэтому любые изменения, внесенные в DOM, отражаются в этой коллекции. Коллекция обеспечивает произвольный доступ и имеет длину.

var element = elements[0];
//Alternative
element = elements.item(0);

element содержит первый встреченный элемент HTML с этим классом. Если таких элементов нет, element имеет значение undefined в первом примере и значение null во втором примере.

var length = elements.length;

length равна количеству элементов HTML, которые в настоящее время имеют класс «рецепт». Это число может измениться при изменении DOM.

Получить по имени

var elements = document.getElementsByName("zipcode");

elements будут содержать живой NodeList ( NodeList массиву объект) всех элементов с атрибутом name установленным на «zipcode». Эта коллекция синхронизируется с DOM, поэтому любые изменения, внесенные в DOM, отражаются в этой коллекции. Коллекция обеспечивает произвольный доступ и имеет длину.

var element = elements[0];
//Alternative
element = elements.item(0);

element содержит первый встреченный элемент HTML с этим именем.

var length = elements.length;

length равна количеству элементов HTML, которые в настоящее время имеют «zipcode» в качестве их атрибута имени. Это число может измениться при изменении DOM.

Начиная

DOM (Document Object Model) - это программный интерфейс для документов HTML и XML, он определяет логическую структуру документов и способ доступа и обработки документа.

Основными разработчиками DOM API являются веб-браузеры. Спецификации стандартизованы группами W3C и WHATWG , а объектная модель определяет логическую модель для интерфейса программирования.

Представление структуры DOM напоминает древовидное представление, где каждый узел представляет собой объект, представляющий часть разметки, в зависимости от типа каждый элемент также наследует конкретные и общие функциональные возможности.

Было выбрано имя «Объектная модель документа», поскольку оно является «объектной моделью» в традиционном объектно-ориентированном смысле проекта: документы моделируются с использованием объектов, а модель охватывает не только структуру документа, но и поведение документа и объекты, из которых он составлен. Другими словами, взяв пример HTML-диаграммы, узлы не представляют структуру данных, они представляют объекты, которые имеют функции и идентичность. В качестве объектной модели Document Object Model идентифицирует:

• интерфейсы и объекты, используемые для представления и управления документом
• семантика этих интерфейсов и объектов - включая поведение и атрибуты
• отношения и сотрудничество между этими интерфейсами и объектами

Подождите, пока DOM будет загружен

Используйте DOMContentLoaded когда код <script> взаимодействующий с DOM, включен в раздел <head> . Если он не DOMContentLoaded обратный вызов DOMContentLoaded , код будет DOMContentLoaded ошибки, такие как

Не могу прочитать что-то null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Альтернатива DOMContentLoaded

Альтернатива (подходит для IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

Использовать innerHTML

HTML

<div id="app"></div>

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'

и теперь HTML выглядит так

<div id="app">
    <p>Some text</p>
</div>

Разметка HTML

пример ввода:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

Выход элемента DOM:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Все вышеперечисленные элементы наследуются от интерфейса HTMLElement и настраиваются в зависимости от конкретного тега