Марк Кан - Основы программирования на JavaScript

С целью рассмотрения оператора childNodes и функции getElementsByTagName перепишем приведенный пример немного по-другому:

function setColors(tbody, color1, color2){

var colors = [color1, color2];

for(var i=0; i

tbody.childNodes[i].style.backgroundColor = colors[i % 2];

}

}

function setColors(tbody, color1, color2){

var colors = [color1, color2];

var trs = tbody.getElementsByTagName('TR');

for(var i=0; i

trs[i].style.backgroundColor = colors[i % 2];

}

}

Обе эти функции делают то же самое, что и первая функция setColors , но написано это немного по-другому. Первая функция использует атрибут childNodes . Как ранее говорилось, childNodes содержит массив, элементами которого являются потомки. Поэтому мы циклически перебираем tbody.childNodes и изменяем цвет каждого потомка, которые все должны быть элементами TR .

Другая функция использует новую функцию getElementsByTagName , которая выдает массив всех элементов с указанным именем тега. Так как нам требуются все элементы TR , то мы просто передаем в функцию 'TR' и получаем список всех элементов TR в таблице. После этого код почти идентичен предыдущей функции.

Работа с текстом немного отличается от работы с другими элементами DOM . Первое: каждый фрагмент текста на странице помещен в невидимый узел #TEXT . Поэтому следующий код HTML

имеет четыре корневых элемента: текстовый узел со значением " this is ", элемент A , еще один текстовый узел со значением " and an image: " и, наконец, элемент IMG . Элемент A имеет конечный текстовый узел в качестве потомка со значением " a link ". Когда необходимо изменить текст, то прежде всего необходимо получить этот "невидимый" узел. Если мы хотим изменить текст " and an image: ", то необходимо написать:

document.getElementById('ourTest').childNodes[2].nodeValue = 'our new text';

document.getElementById('ourTest') дает нам тег div. childNodes[2] дает узел текста " and an image: " и наконец nodeValue изменяет значение этого узла текста.

Что, если требуется добавить к этому еще текст, но не в конце, а перед " a link "?

var newText = document.createTextNode('our new text');

var ourDiv = document.getElementById('ourTest');

ourDiv.insertBefore(newText, ourDiv.childNodes[1]);

Первая строка показывает, как создать текст с помощью document.createTextNode . Это аналогично функции использованной ранее функции document.createElement . Третья строка содержит еще одну новую функцию insertBefore , которая аналогична appendChild , за исключением того, что имеет два аргумента: добавляемый элемент и существующий элемент, перед которым надо сделать вставку. Так как мы хотим добавить новый текст перед элементом A и знаем, что элемент A является вторым элементом в div , то мы используем ourDiv.childNodes[1] в качестве второго аргумента для insertBefore .

По большей части это все манипуляции с DOM . Если требуется создать, например, поле с изменяемым размером, то для изменения ширины и высоты поля будут использоваться те же функции мыши и функции getAttribute и setAttribute . Очень похожим образом, если изменять верхнюю и левую позицию стиля элемента, то можно перемещать элементы по странице, либо в ответ на ввод мыши (перетаскивание), либо по таймеру (анимация).

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

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

В предыдущей лекциирассматривалось использование объекта документа. Были показаны функции document.forms , document.getElementById , document.createElement и некоторые другие, которые встроены в объект document . В этой лекции будут подробно рассмотрены объект документа ( document ) и объект окна ( window ), которые обладают многими полезными функциями.

Объект document представляет реальное содержимое страницы и поэтому имеет функции, которые помогают изменить саму страницу. Например, запись на странице происходит с помощью document.write , а обращение к форме - с помощью document.forms .