Добавляем...


Изменение узлов
Элементы непосредственно изменять нельзя, хотя их атрибуты, конечно, можно. Это может казаться странным, но обретает вполне определенный смысл, если учесть, что элементы содержат узлы текста. Чтобы произвести изменения, необходимо модифицировать непосредственно узлы текста. Например, имея

<p id="pi">3TO проверка</p>

вы можете использовать

textNode = document.getElementById('pi').firstChild;

чтобы получить доступ к узлу текста "Это проверка" в рамках элемента абзаца. Обратите внимание на то, как здесь свойство firstChild связано с вызовом метода. Опытные программисты считают, что такая форма связывания методов и свойств помогает избежать использования множества отдельных операторов при доступе к конкретному элементу. Теперь можно определить длину textNode с помощью свойства length (которое указывает число содержащихся в textNode символов) или установить значение, используя свойство data.

alert(textNode.length);         // возвращает 12
textNode.data = "Я изменился!";

Модель DOM уровня 1 определяет целый набор методов для работы с узлами текста. Они описаны в таблице.
Метод Описание
appendData (строка) Этот метод добавляет текст, заданный аргументом строка, в конец узла текста
deleteData (смещение, число) Удаляет указанное число символов, начиная с позиции, указанной значением смещение
insertData (.смещение, строка) Вставляет текст, заданный аргументом строка, начиная с позиции, указанной значением смещение
replaceData (смещение, число, строка) Замещает указанное число символов в узле текста соответствующими символами аргумента строка, начиная с позиции, указанной значением смещение
splitText (смещение) Разделяет узел текста на две части в позиции, указанной значением смещение. Возвращает правую часть результата разделения в виде нового узла текста, левая часть остается в исходном узле
substringData (смещение, число) Возвращает строку текста, содержащую указанное число символов строки содержимого текстового узла, начиная с позиции, указанной значением смещение


Следующий пример иллюстрирует применение этих методов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Модификация узла</title>
<meta http-equiv="content-type" content="text/html;" />
</head>
<body>
<p id="p1">Это проверка</p>
<script type="text/javascript">
<!--
var textNode = document.getElementById('p1').firstChild;
//-->
</script>
<form action="#" method="get">
<input type="button" value="показать" onclick="alert(textNode.data);" />
<input type="button" value="длина" onclick="alert(textNode.length);" />
<input type="button" value="изменить" onclick="textNode.data = 'Это новое значение!'" />
<input type="button" value="добавить" onclick="textNode.appendData(' добавить в конец');" />
<input type="button" value="вставить" onclick="textNode.insertData(0,'добавить в начало ');" />
<input type="button" value="удалить" onclick="textNode.deleteData(0, 2);" />
<input type="button" value="заменить" onclick="textNode.replaceData(0,4,'Ура!');" />
<input type="button" value="подстрока" onclick="alert(textNode.substringData(2,2));" />
<input type="button" value="разделить" onclick="temp = textNode.splitText(5); alert('Узел текста ='+textNode.data+'\nSplit Value = '+temp.data);" />
</form>
</body>
</html>

Наконец, заметим, что с помощью этих свойств и методов можно также менять значения узлов Comment (узлов комментариев). Однако, ввиду того, что комментарии не влияют на представление документа, обычно они так не модифицируются. Возникает соблазн применить этот подход для изменения свойств CSS, размещаемых под маской комментариев (X)HTML, но этого делать не рекомендуется. Немного позже, в разделе "DOM и CSS" этой главы мы покажем, как можно получить доступ к свойствам CSS, используя средства DOM уровня 2.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика