JavaScript. HTML DOM

В прошлой статье был рассмотрен пример того как происходит манипуляция тегами, очевидно, что достаточно использовать HTML DOM объекты. Главный объект из HTML DOM это document, через него идет доступ ко всем остальным тегам. Из схемы видно, что объект document несет в себе корневой элемент, который отвечает за весь HTML в целом, он и сам состоит еще из нескольких объектов через которые можно получить доступ к head, title с одной стороны, и body с его элементами в другой. Например, чтоб занести значение title на странице, достаточно записать:

//Запишет в HTML заголовок.
document.title="Example";

Добраться к элементу можно несколькими способами, один из них - представить элементы тела body в виде массива данных. Элемент body является родителем всех элементов внутри него, а значит - всего содержимого на странице, и может представить свою внутреннюю структуру в виде массива элементов:

document.body.childNodes[1].value;

//Из прошлого примера, по этому индексу в массиве находится элемент для ввода текста.

Этот метод больше подходит для сканирования содержания страницы. Есть более простые способы добраться до нужного элемента по названию его id :

// Поиск элемента по id
var i=document.getElementById("text_in").value; //Содержимое поле ввода сохраняется в переменную
document.getElementById("text_out").innerHTML=i; // Содержимое переменной выводится в нужном месте

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