13. Объектная модель документа. DOM W3C
Примеры
Пример 01
praxis/13/examples/01/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 01</TITLE>
</HEAD>
<BODY>
<H1>Пример 01</H1>
<BUTTON id="button">Добавить абзац к документу</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
appendP("Абзац номер "+(counter++)+".");
};
var counter = 1; // Счетчик абзацев
// Добавить абзац к документу
function appendP(text)
{
// Создадим элемент "абзац"
var el = document.createElement("p");
// Добавим к созданному элементу потомка -- текстовый элемент
el.appendChild(document.createTextNode(text));
// Добавим построенный элемент к BODY -- и он сразу отобразится на экране
document.body.appendChild(el);
}
};
Пример 02
praxis/13/examples/02/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 02</TITLE>
</HEAD>
<BODY>
<H1>Пример 02</H1>
<P id="fp">
«Главное ребята — <EM>сердцем</EM> не стареть!»
<P>
<BUTTON id="button">Клонировать первый абзац</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
// Получить доступ к элементу с id="fp"
var fp = document.getElementById("fp");
// Клонировать элемент
var node = fp.cloneNode(true);
// Добавить клон в конец документа
document.body.appendChild(node);
};
};
Пример 03
praxis/13/examples/03/index.htm
Проверяется, есть ли в первом элементе P атрибуты, и имеет ли этот элемент дочерние узлы.
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 03</TITLE>
</HEAD>
<BODY>
<H1>Пример 03</H1>
<P>
«Главное ребята — <EM>сердцем</EM> не стареть!»
<P>
<BUTTON id="button">Анализ первого абзаца</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
var first = true;
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
if (first) // Однократная работа обработчика
{
// Метод getElementsByTagName возвращает массив узлов с заданным тегом
// Получить доступ к первому абзацу документа
var fp = document.getElementsByTagName("p")[0];
var attr = "не знаю, есть ли атрибуты";
if (fp.hasAttributes) // Проверим, поддерживает ли браузер этот метод
attr = fp.hasAttributes() ? "есть атрибуты" : "нет атрибутов";
var child = "не знаю, есть ли дочерние узлы";
if (fp.hasChildNodes) // Проверим, поддерживает ли браузер этот метод
child = fp.hasChildNodes() ? "Есть дочерние узлы" : "Нет дочерних узлов";
var text = "В первом абзаце " + attr + ". " + child + ".";
// Добавить абзац к документу
appendP(text);
first = false; // Чтобы больше внутренность if не работала
}
};
// Добавить абзац к документу
function appendP(text)
{
// Создадим элемент "абзац"
var el = document.createElement("p");
// Добавим к созданному элементу потомка -- текстовый элемент
el.appendChild(document.createTextNode(text));
// Добавим построенный элемент к BODY -- и он сразу отобразится на экране
document.body.appendChild(el);
}
};
Пример 04
praxis/13/examples/04/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 04</TITLE>
</HEAD>
<BODY>
<H1>Пример 04</H1>
<P id="fp">
«Главное ребята — <EM>сердцем</EM> не стареть!»
<P>
<BUTTON id="button">Вставить абзац в начало документа</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
insertP("Абзац номер "+(counter++)+".");
};
var counter = 1; // Счетчик абзацев
// Добавить абзац в начало документа
function insertP(text)
{
// Создадим элемент "абзац"
var el = document.createElement("p");
// Добавим к созданному элементу потомка -- текстовый элемент
el.appendChild(document.createTextNode(text));
// Вставим построенный элемент в начало BODY
document.body.insertBefore(el, document.body.firstChild);
}
};
Пример 05
praxis/13/examples/05/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 05</TITLE>
</HEAD>
<BODY>
<H1>Пример 05</H1>
<HR>
<P>
«Легко на сердце от песни весёлой!»
</P>
<P>
<BUTTON id="button">Переставить</BUTTON>
</P>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения DOM
window.onload = function ()
{
// Удалить из документа текстовые узлы, которые являются
// прямыми потомками BODY. Такие узлы возникают из-за пробелов
// между элементами в HTML-коде и концов строк. В разных браузерах
// таких узлов может быть разное количество
delTextNodes(document.body);
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
// Переставить последний элемент на место первого.
// Вставляемый элемент автоматически удаляется со старого места в DOM
document.body.insertBefore(document.body.lastChild, document.body.firstChild);
};
// Удалить из узла node текстовые узлы, которые являются
// прямыми потомками node. Обратите внимание: если узел
// удаляется, счетчик цикла не наращивается. Так сделано потому,
// что список узлов -- "живой", на место удалённого узла встает
// следующий (childNodes.length тоже меняется автоматически), и он
// не будет проверен, если счетчик цикла увеличится в его заголовке.
function delTextNodes(node)
{
var childNodes = node.childNodes; // Ссылка на "живой" массив детей
for(var i=0; i<childNodes.length;)
if(childNodes[i].nodeType == 3 /* Node.TEXT_NODE */)
node.removeChild(childNodes[i]);
else i++;
}
};
Пример 06
praxis/13/examples/06/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 06</TITLE>
</HEAD>
<BODY>
<H1>Пример 06</H1>
<HR>
<P>
Скрипт этого приложения вставляет в каждый элемент атрибут
<CODE>title</CODE> со значением, равным имени тега элемента. Кроме
того, скрипт подсчитывает число элементов внутри <CODE>BODY</CODE>,
считая сам <CODE>BODY</CODE>.
</P>
<P>
<BUTTON id="button">Выполнить скрипт</BUTTON>
</P>
<P>
После работы скрипта каждый элемент станет чувствительный к
появлению над ним мышиного указателя (проверьте).
</P>
<P id="counter">
А в этом абзаце будет записано подсчитанное количество элементов.
</P>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения DOM
window.onload = function ()
{
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
// Подсчитаем количество элементов и навесим title на элементы
var n = skipping(document.body);
// Создадим текстовый узел
var textEl = document.createTextNode("Количество элементов: "+n + ".");
// и заменим им текст абзаца с id="counter"
var counter = document.getElementById("counter");
// Этот метод сработает так, как нам хочется, если только
// внутри абзаца нет других элементов (только текст)
counter.replaceChild(textEl, counter.firstChild);
};
// Функция получает узел в качестве аргумента,
// рекурсивно вычисляет количество узлов типа Element (считая сам корень)
// и в каждый такой узел вставляет атрибут title с именем тега элемента.
// Функция возвращает количество узлов типа Element (считая корень).
function skipping(node)
{
var numElements = 0; // Счетчик узлов Element
// Если node есть узел Element, увеличиваем счетчик на 1
// и дополняем элемент атрибутом title с именем тега элемента.
if (node.nodeType == 1 /* Node.ELEMENT_NODE */)
{
numElements++;
node.title = node.tagName;
}
var children = node.childNodes; // Получим список дочерних элементов
for(var i=0; i<children.length; i++) // Смотрим все дочерние элементы
numElements += skipping(children[i]); // Рекурсия по дочерним элементам
return numElements; // Возвращаем число элементов
}
};
Пример 07
praxis/13/examples/07/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 07</TITLE>
</HEAD>
<BODY>
<H1>Пример 07</H1>
<P>
Набор внешних ссылок:
</P>
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>) &—
это предприятие, которое занимается дистанционным обучением и
созданием обучающих продуктов.
<P>
А эта ссылка на <A href="01.htm">историю</A>& &— внутренняя
(её скрипт пропустил).
</P>
</BODY>
</HTML>
Содержимое файла main.css
/* Оформление внешней ссылки */
A.off
{
background: url(pic/off.gif) no-repeat center right;
padding-right: 11px;
margin-right: 2px;
zoom:1; /* хак для IE */
}
A {text-decoration:none;}
A:link {color:blue}
A:active {color:red}
A:visited {color:purple}
A:hover {color:red;text-decoration:underline}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения DOM
window.onload = function ()
{
// Вызов setOffLinks для BODY
setOffLinks(document.body, "off");
// Функция обходит дерево узла node в поиске элементов
// <A href="http...">...</A> -- внешних ссылок, и в каждый такой
// элемент вставляет атрибут class=cl
function setOffLinks(node, cl)
{
// Если это элемент, и это элемент A, и значение его
// атрибута href начинаетя с "http" (внешняя ссылка),
// то присвоить атрибуту class значение cl.
if (node.nodeType == 1 &&
node.tagName.toLowerCase() == "a" &&
node.href.search(/^http/) != -1) node.className = cl;
// Рекурсивный обход дочерних узлов
var children = node.childNodes; // Получим список дочерних элементов
for(var i=0; i<children.length; i++) // Смотрим все дочерние элементы
setOffLinks(children[i],cl); // Рекурсия по дочерним элементам
}
};
Пример 08
praxis/13/examples/08/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 08</TITLE>
</HEAD>
<BODY>
<H1>Пример 08</H1>
<P>
Набор внешних ссылок:
</P>
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>) —
это предприятие, которое занимается дистанционным обучением и
созданием обучающих продуктов.
<P>
А эта ссылка на <A href="01.htm">историю</A> — внутренняя
(её скрипт пропустил).
</P>
</BODY>
</HTML>
Содержимое файла main.css
/* Оформление внешней ссылки */
A.off
{
background: url(pic/off.gif) no-repeat center right;
padding-right: 11px;
margin-right: 2px;
zoom:1; /* хак для IE */
}
A {text-decoration:none;}
A:link {color:blue}
A:active {color:red}
A:visited {color:purple}
A:hover {color:red;text-decoration:underline}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения DOM
window.onload = function ()
{
var list = getElements(null, "a", document.body);
for(var i=0; i<list.length; i++)
if (list[i].href.search(/^http/) != -1) list[i].className = "off";
/**
* getElements(classname, tagname, root):
* Если какой-то промежуточный аргумент отсутствует, используйту null.
* Функция возвращает массив ссылок на DOM-элементы, которые являются
* членами указанного класса, соответствуют тегам с заданным именем и вложены
* в элемент root.
*
* Если аргумент classname не определен, отбор элементов производится
* без учета принадлежности к какому-то определенному классу.
* Если аргумент tagname не определен, отбор элементов производится без
* учета имени тега.
* Если аргумент root не определён, поиск производится в объекте document.
* Если аргумент root является строкой, он воспринимается как идентификатор
* элемента и поиск производится среди элементов, вложенных в элемент
* с этим идентификатором.
*/
function getElements(classname, tagname, root)
{
// Если root не задан, произвести поиск по всему документу
// Если это строка, найти сам объект
if (!root) root = document;
else if (typeof root == "string") root = document.getElementById(root);
// Если имя тега не определено, искать без учета имени тега
if (!tagname) tagname = "*";
// Искать элементы, вложенные в элемент root и имеющие
// заданное имя тега
var all = root.getElementsByTagName(tagname);
// Если имя класса не определено, вернуть все теги без учета имени класса
if (!classname) return all;
// В противном случае отобрать элементы по имени класса
var elements = []; // Создается пустой массив
for(var i = 0; i < all.length; i++)
{
var element = all[i];
if (isMember(element, classname)) // isMember() определена далее
elements.push(element); // Добавлять члены класса в массив
}
// Вернуть результат (всегда возвращается массив, даже если он пустой)
return elements;
// Функция определяет принадлежность элемента к заданному классу.
// Эта функция оптимизирована для случая, когда свойство
// classname содержит единственное имя класса, но учитывает возможность
// наличия нескольких имен классов, разделенных пробелами (это
// допускается синтаксисом языка CSS).
function isMember(element, classname)
{
var classes = element.className; // Получить список классов
if (!classes) return false; // Класс не определен
if (classes == classname) return true; // Точное совпадение
// Нет точного совпадения, поэтому если в списке нет пробелов,
// то этот элемент не является членом класса.
// Для проверки используется метод test объекта
// RegExp (регулярные выражения)
var whitespace = /\s+/;
if (!whitespace.test(classes)) return false;
// В этой точке известно, что элемент принадлежит нескольким
// классам, поэтому нужно проверить каждый из них
var c = classes.split(whitespace); // Разбить по символам пробелов
for(var i = 0; i < c.length; i++) // Цикл по всем классам
if (c[i] == classname) return true; // Проверить совпадение
return false; // Не обнаружено ни одного совпадения
}
}
};
Пример 09
praxis/13/examples/09/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 09. Галерея изображений</TITLE>
</HEAD>
<BODY>
<H1>Галерея изображений</H1>
<DIV id="show"> </DIV> <!-- Блок для показа изображений -->
<DIV id="picmenu"> <!-- Набор иконок -->
<IMG src="pic/01.png" width=498 hieght=380
alt= "Букет" title="Букет">
<IMG src="pic/02.png" width=551 hieght=380
alt= "Дромадер" title="Дромадер">
<IMG src="pic/03.png" width=356 hieght=380
alt= "Барабанщик" title="Барабанщик">
<IMG src="pic/04.png" width=294 hieght=380
alt= "Шарик" title="Шарик">
<IMG src="pic/05.png" width=500 hieght=283
alt= "Авто" title="Авто">
<IMG src="pic/06.png" width=450 hieght=380
alt= "Пишмаш" title="Пишмаш">
</DIV>
</BODY>
</HTML>
Содержимое файла main.css
HTML
{
text-align:center; /* Центрирование BODY для IE5 */
background:#f3f8f6; /* Фон документа */
}
BODY
{
position: relative;
margin: 10px auto; /* BODY по центру HTML */
padding:0; /* Уберём внутренний отступ */
text-align: left; /* Восстановим выравнивание текста слева */
border: 1px solid #638F7B; /* Рамка для страницы */
font:small Georgia, serif; /* Шрифт */
background:white; /* Цвет фона */
color: #2A3D34; /* Цвет текста */
width:760px; /* Для хороших старых браузеров */
\width:762px; /* Обман для IE5 и IE6 */
w\idth:760px; /* Для всех новых хороших браузеров */
}
/* Заголовок */
H1
{
text-align:center;
background:#007143;
color:white;
margin:0;padding:0;
text-transform:uppercase;
font:bold 40px Georgia,serif;
letter-spacing:2px;
line-height:80px;
}
#show
{
position: relative;
text-align:center;
margin:10px;
padding:10px;
border: 1px solid black;
height:400px;
}
#picmenu
{
margin:10px;
padding:10px;
}
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения DOM
window.onload = function ()
{
// КОНСТАНТЫ =======================================================
var heightShow = 400; // Высота блока показа картинки
var heightIcon = 80; // Высота иконки в меню иконок
var opacityIcon = "0.5"; // Уровень прозрачности иконок в меню
// ССЫЛКИ НА ЭЛЕМЕНТЫ =============================================
var picmenu = document.getElementById("picmenu"); // Меню иконок
var show = document.getElementById("show"); // Блок показа картинок
var list = getElements(null, "img", picmenu); // Список ссылок на иконки
// МАССИВЫ, В КОТОРЫХ ЗАПОМНИМ РЕАЛЬНЫЕ РАЗМЕРЫ КАРТИНОК ===========
var widths = new Array(list.length);
var heights = new Array(list.length);
// ОСНОВНАЯ РАБОТА =================================================
for(var i=0; i<list.length; i++) // Цикл по иконкам
{
// Сохранить реальные размеры картинок
widths[i] = list[i].width;
heights[i] = list[i].height;
// Уменьшить пропорционально размеры картинок в меню
list[i].height = heightIcon; // Высота всех иконок одинакова
list[i].removeAttribute("width"); // Ширину браузер выставит сам
// Установить прозрачность для иконок в меню
list[i].style.opacity = opacityIcon; // По стандарту
list[i].style.filter = "alpha(opacity="+(opacityIcon*100)+")"; // Для IE
// Закрепить за иконками обработчики событий
list[i].onclick = showPic;
list[i].onmouseover = overPic;
list[i].onmouseout = outPic;
}
// Обработчик onmouseover: непрозрачность 100%
function overPic()
{
this.style.opacity = "1.0";
this.style.filter = "alpha(opacity=100";
}
// Обработчик onmouseout: прозрачность, заданная opacityIcon
function outPic()
{
this.style.opacity = opacityIcon;
this.style.filter = "alpha(opacity="+(opacityIcon*100)+")";
}
// Обработчик onclick: показать картинку
function showPic()
{
// Получить копию иконки из меню
var el = this.cloneNode(false);
// Установить реальные размеры картинок
var i = getInd(this); // Получить индекс иконки в массиве list
el.height = widths[i];
el.height = heights[i];
// Показать картинку
show.replaceChild(el,show.firstChild);
// Сместить ее в центp блока по вертикали
var pic = show.firstChild;
pic.style.position = "relative";
pic.style.top = ((heightShow - el.height)/2) + "px";
}
// Получить индекс иконки в массиве list
function getInd(pic)
{
var list = getElements(null, "img", picmenu);
for(var i=0; i<list.length; i++)
if (list[i]==pic) return i;
return 0;
}
// ОТБОР ЭЛЕМЕНТОВ =================================================
/**
* getElements(classname, tagname, root):
* Если какой-то промежуточный аргумент отсутствует, используйту null.
* Функция возвращает массив ссылок на DOM-элементы, которые являются
* членами указанного класса, соответствуют тегам с заданным именем и вложены
* в элемент root.
*
* Если аргумент classname не определен, отбор элементов производится
* без учета принадлежности к какому-то определенному классу.
* Если аргумент tagname не определен, отбор элементов производится без
* учета имени тега.
* Если аргумент root не определён, поиск производится в объекте document.
* Если аргумент root является строкой, он воспринимается как идентификатор
* элемента и поиск производится среди элементов, вложенных в элемент
* с этим идентификатором.
*/
function getElements(classname, tagname, root)
{
// Если root не задан, произвести поиск по всему документу
// Если это строка, найти сам объект
if (!root) root = document;
else if (typeof root == "string") root = document.getElementById(root);
// Если имя тега не определено, искать без учета имени тега
if (!tagname) tagname = "*";
// Искать элементы, вложенные в элемент root и имеющие
// заданное имя тега
var all = root.getElementsByTagName(tagname);
// Если имя класса не определено, вернуть все теги без учета имени класса
if (!classname) return all;
// В противном случае отобрать элементы по имени класса
var elements = []; // Создается пустой массив
for(var i = 0; i < all.length; i++)
{
var element = all[i];
if (isMember(element, classname)) // isMember() определена далее
elements.push(element); // Добавлять члены класса в массив
}
// Вернуть результат (всегда возвращается массив, даже если он пустой)
return elements;
// Функция определяет принадлежность элемента к заданному классу.
// Эта функция оптимизирована для случая, когда свойство
// classname содержит единственное имя класса, но учитывает возможность
// наличия нескольких имен классов, разделенных пробелами (это
// допускается синтаксисом языка CSS).
function isMember(element, classname)
{
var classes = element.className; // Получить список классов
if (!classes) return false; // Класс не определен
if (classes == classname) return true; // Точное совпадение
// Нет точного совпадения, поэтому если в списке нет пробелов,
// то этот элемент не является членом класса.
// Для проверки используется метод test объекта
// RegExp (регулярные выражения)
var whitespace = /\s+/;
if (!whitespace.test(classes)) return false;
// В этой точке известно, что элемент принадлежит нескольким
// классам, поэтому нужно проверить каждый из них
var c = classes.split(whitespace); // Разбить по символам пробелов
for(var i = 0; i < c.length; i++) // Цикл по всем классам
if (c[i] == classname) return true; // Проверить совпадение
return false; // Не обнаружено ни одного совпадения
}
}
};
Пример 10
praxis/13/examples/10/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<META http-equiv="Content-Script-Type" content="text/javascript">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Пример 10</TITLE>
</HEAD>
<BODY>
<H1>Пример 10</H1>
<UL id="list">
<LI>Важная птица
<LI>Выеденное яйцо
<LI>Гад ползучий
<LI>Жареный петух
<LI>Заблудшая овца
<LI>Лакомый кусок
<LI>Маковая росинка
<LI>Малая толика
<LI>Саврас без узды
<LI>Фига с маслом
<LI>Яблоко раздора
<LI>Язык без костей
</UL>
<P>
<BUTTON id="button">Переставить</BUTTON>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick элементу с id="button"
document.getElementById("button").onclick = function ()
{
reverse(document.getElementById("list"));
};
// Меняет порядок следования дочерних узлов узла n на обратный
function reverse(n)
{
// Создать пустой объект DocumentFragment (временное хранилище узлов)
var f = document.createDocumentFragment();
// Обойти все дочерние узлы в обратном порядке и переместить
// их во временное хранилище. Последний дочерний элемент узла n станет
// первым дочерним узлом f, и наоборот. Обратите внимание: добавление
// узла в f автоматически вызовет его удаление из n.
while(n.lastChild) f.appendChild(n.lastChild);
// Переместим все дочерние узлы из f обратно в n за один шаг
// (при этом f станет пустым).
n.appendChild(f);
}
};