Опубликован: 19.10.2006 | Доступ: свободный | Студентов: 10017 / 2299 | Оценка: 4.14 / 3.85 | Длительность: 08:05:00
Лекция 6:

Объектная модель документа

< Лекция 5 || Лекция 6: 1234 || Лекция 7 >

Работа с текстом

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

<div id="ourTest">this is <a href="link.html">a link</a> and an image: <img src="img.jpg"></div>

имеет четыре корневых элемента: текстовый узел со значением " 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. В "Объект документа и объект окна" будут рассмотрены объекты окна и документа.

< Лекция 5 || Лекция 6: 1234 || Лекция 7 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Рустам Рахимов
Рустам Рахимов

Пол часа искал в интеренете, как что работает. Такое чувство что автор пишет для людей которые уже знают js, или просто хвастается своими знаниями. Конструкция формы непонятна. И можно было бы в кратце написать, что такое событие которое используют. Сорершенно не понятно как работает форма, и как брать из нее значение. 

function Complete() {

    var x = "Имя: " + document.tutform.firstname.value;

alert(x);

} - Так брать значение из формы tutform, firstname-получаем значение из имени. 

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.