|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как изменить содержимое страницы после ее загрузки?  

Как изменить содержимое страницы после ее загрузки?

Оглавление
Как изменить содержимое страницы после ее загрузки?
Страница 2
Страница 3
Страница 3 из 3

Очень полезный метод cloneNode позволяет получить точную копию элемента страницы. Вызывается он так:

<Элемент страницы>.cloneNode(<Включать потомки и атрибуты>);

Единственный параметр этого метода должен быть логической величиной. Если он равен true, в копию элемента страницы будут включены все его потомки и атрибуты, если они были созданы. Значение false предписывает выполнить копирование только самого этого элемента страницы. Метод возвращает экземпляр объекта, соответствующий КОПИИ Элемента страницы.

Народ советует

Если нам понадобится создать очень много однотипных элементов страниц (например, ячеек и строк таблицы), метод cloneNode будет исключительно полезен.

А что же атрибуты тегов? За атрибуты "отвечает" целый набор методов, которые мы сейчас рассмотрим.

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

<Элемент страницы>.setAttribute(<Имя атрибута>, <3начение атрибута>);

Оба параметра этого метода передаются в строковом виде. Например:

document.body.lastChild.setAttribute("id", "para"); Это выражение задает для нашего абзаца имя para.

Народ предупреждает!

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

document.body.lastChild.setAttribute("onclick", "someFunction();");

Но созданные таким образом обработчики события будут поддерживаться только Opera и Firefox. Если же мы хотим задавать таким образом обработчики событий, которые бы поддерживались Internet Explorer, нам придется слегка нарушить формат вызова метода setAttribute, передав вторым параметром не строку, содержащую выражение, а саму функцию-обработчик:

document.body.lastChild.setAttribute("onclick", someFunction);

Но заданные таким образом обработчики событий будут поддерживаться, наоборот, только Internet Explorer. Поэтому лучше не задавать обработчики событий методом setAttribute, а использовать для этого способы, описанные в главе 2.

Метод getAttribute позволяет получить значение атрибута:

<Элемент страницы>.getAttribute(<Имя атрибута>);

Имя атрибута передается в строковом виде. Метод возвращает строку, содержащую значение атрибута. Если значение не задано, возвращается значение по умолчанию или пустая строка, если для данного атрибута значение по умолчанию не определено.

Метод hasAttribute позволяет проверить, определен ли данный атрибут в теге, который формирует данный элемент страницы:

<Элемент страницы>..hasAttribute(<Имя атрибута>),

Имя атрибута передается в строковом виде. Метод возвращает true, если такой атрибут определен, и false в противном случае.

А метод removeAttribute удаляет атрибут из тега:

<Элемент страницы>.removeAttribute(<Имя атрибута>);

И здесь имя атрибута передается в строковом виде. Метод не возвращает значения.

Народ предупреждает!

Internet Explorer отличился и здесь — он не "находит" атрибуты, имена которых заданы большими буквами. Поэтому всегда следует задавать эти имена маленькими буквами.

Кроме того, существует не принимающий параметров метод hasAttributes, возвращающий true, если тег, который формирует элемент страницы, содержит атрибуты со значениями, отличными от значений по умолчанию, и false в противном случае.

Пример

Далее приведен код HTML Web-страницы, в которой программно создается текстовый абзац вида

Щелкните, пожалуйста, по мне!

где слово "пожалуйста" выделено курсивом. При щелчке мышью по этому абзацу будет выведено окно-сообщение.

<HTML> <HEAD>

<TITLE>Демонстрация работы DOM</TITLE> <SCRIPT TYPE="text/javascript">

// Функция-обработчик события onclick абзаца function paraOnClick()

{

window.alert("Вы щелкнули по абзацу");

} </SCRIPT> </HEAD> <BODY>

<SCRIPT TYPE="text/javascript">

// Создаем сам абзац

var pObject = document.createElement("P");

// Задаем имя абзаца

pObject.setAttribute("id", "para");

// Создаем первую часть текста абзаца

var textlObject = document.createTextNode("Щелкните, ");

// Создаем элемент-потомок — тег <ЕМ>, в который будет заключена

// вторая часть текста абзаца

var emObject = document.createElement("EM");

// Создаем вторую часть текста абзаца

var text20bject = document.createTextNode("пожалуйста");

// Помещаем вторую часть текста абзаца в тег <ЕМ>

emObject.appendChild(text2Object);

// Создаем третью часть текста абзаца

var text30bject = document.createTextNode(", по мне!");

// Помещаем все эти части текста в абзац

pObj ect.appendChild(text1Obj ect);

pObj ect.appendChild(emObject);

pObject.appendChild(text3Object);

// Помещаем абзац в тело Web-страницы

document.body.appendChild (pObject) ;

// Создаем обработчик события onclick абзаца

document.all["para"].onclick = paraOnClick; </SCRIPT> </BODY> </HTML>

Народ советует

Вообще, самый простой способ привязать к событию создаваемого программно абзаца функцию-обработчик — это сделать вот так:

pObject.onclick = paraOnClick; Как говорится, дешево и сердито.

Что дальше?

Закончив со скучным текстом, мы вскоре перейдем к работе с графикой. И произойдет это в следующей главе.


« Пред. - След.


RLBN.ru - Электроника и компьютеры

0.1407
Hosted by uCoz