Использование DOM. Изменение элементов, доступ к стилям онлайн урок.


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

Когда мы получили доступ к элементу DOM, мы можем менять его содержимое или значение атрибутов в контексте свойств объекта. Для доступа к содержимому элемента используется свойство innerHTML - оно представляет содержимое элемента, включая разметку HTML для всех дочерних элементов

Изменение содержимого объекта. Рассмотрим пример. Пусть даны несколько блочных элементов.


<div id='some-block'>Hello, I am unique</div>
<div>Just another text</div>
<div>Just another text 2</div>
<div>Just another text 3</div>


Создадим кнопки для изменения значения элемента по атрибуту id и по названию тега. Это реализуется при помощи создания соответствующих функций и дальнейшей обработки события onclick конкретной кнопки. Функции будут иметь следующий вид:

function changeSingle(element) {
    element.innerHTML = '<b>Hey</b>, this is some content with <i>tags</i>';
}

function changeCollection(elements) {
    for (var i=0; i<elements.length; i++) {
        elements[i].innerHTML = 'Boy, we all are <b>changed</b> now';
    }
}


Осталось создать скрипт для нахождения элементов и добавить кнопки на страничку. Полный код веб-документа будет выглядеть так:



В результате кликов по кнопкам будет изменяться содержимое блочных тегов и при этом одновременно будет меняться сама объектная модель документа.

Изменить внутренне содержимое объекта также можно и используя ключевое слово this.


<p onclick = "this.innerHTML = 'Hello'; ">This is a test</p>


Тогда, по клику на этот элемент, его содержимое изменится.

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


<a id='test-link' href='http://google.com'>Gooogle</a>


Тогда, определив объект этой ссылки, мы можем изменить свойство этого объекта - тем самым изменив значение атрибута тега.

var element = document.getElementById('test-link'); // accessing link
element.href = 'http://facebook.com'; // new value for href


Таким же образом можно получить доступ к атрибуту style, и тогда стилевые свойства элемента станут фактически свойствами объекта style. Например,

element.style.color = 'blue'; // now the text inside a is blue


Заметим, что стилевые свойства, которые пишутся через дефис (например font-family) в контексте свойства объекта styleдолжны быть написаны без дефиса и вторая составляющая названия должна быть написана с большой буквы, например

var element = document.getElementById('test-link'); // accessing link
element.style.backgroundColor = 'blue'; // background-color
element.style.fontFamily = 'Arial'; // font-family