DOM. Работа с объектной моделью документа

Создадим несколько параграфов с разными идентификаторами.

Первый параграф

Второй параграф

Третий параграф


<p id="one">Первый параграф</p>

<p id="two">Второй параграф</p>

<p id="three">Третий параграф</p>

Если мы хотим изменить текст параграфа, то должны обратиться к объектной модели документа. Например, попросить объект document найти элемент с нужным идентификатором при помощи функции getElementById().


document.getElementById("one");

Далее можем обращаться к найдённому элементу в сценарии. Например, поменять текст через свойство innerHTML


var oneId = document.getElementById("one");
oneId.innerHTML = "А теперь дискотека";

Этот код нужно использовать только в том случае, когда загрузится вся страница и сформируется структура DOM. Для этой цели обычно используют отдельную функцию и вызывают её в window.onload


<script>
    function init() {
        var oneId = document.getElementById("one");
        oneId.innerHTML = "А теперь дискотека (изменённый текст первого параграфа)";
    }
    
    window.onload = init;    
</script>

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

window.onload выполняется, когда страница уже загрузилась, поэтому наш код отработает корректно.

Объект style элементов веб-страницы задаёт их свойства, например, width и height.

С помощью объектной модели документа мы можем извлекать элементы, создавать и добавлять новые элементы, а также удалять их.

Информация о ширине и высоте окна клиента содержится в свойствах body.clientWidth и body.clientHeight объекта document.

Реклама