Наборы all и children, другие наборы, иерархия элементов, позиционирование.

Как вы уже знаете, HTML-документ - это иерархия. Набор all объекта document представляет все объекты в иерархии документа. Каждый объект в этом наборе представляется как программируемый объект. Доступ к каждому объекту осуществляется по порядковому номеру или по ID (идентификатор, уникальное имя).

<SCRIPT LANGUAGE="JScript">
function showElements()
{
var tag_names = "";
for (i=0; i<document.all.length; i++) tag_names = tag_names + document.all(i).tagName + " ";
alert("This document contains: " + tag_names);
} </SCRIPT>
<BODY onload="showElements()">

В данном примере доступ к каждому элементу осуществляется по его порядковому номеру (то есть можно представить набор document.all как массив). При загрузке документа осуществляется поиск всех элементов документа, с помощью tagName определяется название тэга каждого элемента, все тэги суммируются в одну строку, и она выводится в диалоговом окне. Пример см. здесь

Набор all определяет лишь порядок следования элементов в нем, но не иерархию элементов. (Заметьте также, что в списке не приводятся закрывающие тэги). Он отображает порядок следования элементов в коде HTML.

Каждый элемент в этом наборе - объект, и вы можете использовать свойства и методы данного объекта, как в нашем случае мы использовали свойство tagName.

Набор all представляет текущее состояние документа, и немедленно обновляется при изменении содержимого. То есть вы можете в run-time добавлять и удалять элементы, при этом обновление набора происходит автоматически.

Набор, независимо от источника кода HTML, всегда содержит объекты HTML, HEAD, TITLE, BODY; при наличии тэга TABLE всегда будет присутствовать cоответствующий тэг TBODY;

1) обратите внимание, что all всегда содержит комментарии, неправильно записанные(непарные) и незнакомые броузеру тэги

2) набор all имеет любой элемент, имеющий дочерние (например, таблица (<tr><th><td>));

В примере показана иерархия простого документа. Обратите внимание, что HTML имеет в наборе children HEAD и BODY

Другие наборы

Набор	Применяется	Содержит
anchors	document object	A, имеющий параметр NAME
applets	document	элементы APPLET
areas	MAP element	элементы AREA
cells	TR element	элементы TD or TH
elements	FORM element	элементы BUTTON,INPUT, SELECT, TEXTAREA в форме
embeds	document	элементы EMBED
filters	all elements	filter
forms	document	элементы FORM
frames	document and window	window objects defined with FRAME and IFRAME elements
images	document	элементы IMG
links	document	A, имеющие параметр href
options	SELECT element	элементы OPTION
rows	TABLE	элементы TR
scripts	document	элементы SCRIPT
tbodies	TABLE	элементы TBODY

Доступ к элементам набора

1) Через индекс

function showSixth() {
    var el = document.all(5);
    alert("The sixth element is: " + el.tagName + "\n"+ "Total amount: " + 
     document.all.length);
}
</SCRIPT>
<input type = "Button"  onclick="showSixth()">

Общее количество элементов в наборе определяет свойство length

2) Через идентификатор (ID)

формат такой:

document.all.MyID

или такой

document.all("MyID");

a если элементов с одинаковым ID несколько, то такой

document.all.item("MyID",0);

Создание новых наборов. Метод tags

Применение метода tags создает новый набор с заданным именем тэга, например:

var doc_tables = document.all.tags("TABLE");
for (i=0; i<doc_tables.length; i++)
    doc_tables(i).border = 1;

В данном примере методом перебора всем элементам TABLE созданного нами набора doc_tables присваивается стиль - бордюр толщиной 1. Метод перебирает все заданные тэги, включая почему-то и недопустимые тоже. Созданный набор является подмножеством набора all, поэтому индексы, разумеется, отличаются. Иногда бывает полезно знать индекс элемента в обоих наборах, для чего используют sourceIndex - порядковый номер элемента в наборе all.

Доступ к свойствам элементов

Многие аттрибуты элементов являются парами имя=значение (<h1 align="center" style="...">A</h1>). Вы можете получить или установить эти значения для того, чтобы динамически изменить элемент. Доступ к свойствам, позволяющим вам изменить стиль или содержание элемента, производится через наборы. Например, центровка заголовка динамически производится через sourceIndex, определяющий положение элемента в наборе all

Hello

Button - srcElement;
x - sourceIndex кнопки;
document.all(x-1)- это параграф,
document.all(x-2)- это искомый заголовок, который мы и выравниваем.

...

У картинки мы можем поменять источник:

var coll = document.all.tags("IMG");
if (coll.length>0)
    coll(0).src="newimage.gif";

Многие свойства элементов - только для чтения (например, tagName). Когда по ошибке вы назначаете элементу неверные свойства, или недопустимые значения этих свойств, всегда будет установлено значение по умолчанию. Например, вы написали <h1 align="центр">Caption</h1> - это не сработает, сообщение об ошибке выдаваться не будет, заголовок будет выровнен по левому краю.

Вы можете использовать методы getAttribute(name,[flags]), setAttribute(name,value), removeAttribute(name, boolean). Первый метод возвращает значение value аттрибута name (align=center; align - name, value - значение); второй параметр -flags -необязателен (1 - при поиске учитывается регистр, 2 - возвращается значение в том виде, в котором задано, 0 - комбинация). setAttribute - устанавливает пару имя - значение. removeAttribute - удаляет заданный аттрибут (align=center), второй параметр (true|false) - чувствительность к регистру. Данные методы могут работать и с неизвестными тэгами, таким образом мы може "метить" те или иные нужные нам объекты, обращаясь затем к меченным объектам.

<HTML>
<HEAD><TITLE>Elements: Invalid Values</TITLE>
<SCRIPT LANGUAGE="JScript">
function checkValues() {
    if (document.all.MyHeading.getAttribute("align")=="middle")
        document.all.MyHeading.setAttribute("align","center");
    if (document.all.MyHeading.getAttribute("xyz")!="123")
        document.all.MyHeading.setAttribute("xyz","123");
}
</SCRIPT>
</HEAD>
<BODY onload="checkValues()">
<H1 ID=MyHeading XyZ="123" ALIGN="middle">Welcome!</H1>
<P>This is a short document.
</BODY>
</HTML>

Иерархия элементов

Вы всегда можете проверить, является ли тот или иной объект родителем (старшим в иерархии) другого, и наоборот, имеет ли данный элемент родителя. Соответствующие методы - сontains и parentElement.

<SCRIPT LANGUAGE="JScript">
function showContains() {
var el = document.all.tags("P").item(0);
if (document.body.contains(el))
alert("True!");
else
alert("False!");
}
</SCRIPT>

function showHierarchy() {
var depth = 0;
var msg = document.all(0).tagName;
for (i=1; i<document.all.length; i++) {
if (document.all(i-1).contains(document.all(i))==true) {
depth = depth + 1;
} else {
var elParent = document.all(i-1).parentElement;
for ( ; depth>0; depth--) {
if (elParent.contains(document.all(i))==true)
break;
elParent = elParent.parentElement;
}
}
msg = msg + "\n";
for (j=1; j<=depth; j++) 
msg = msg + " ";
msg = msg + document.all(i).tagName;
}
alert("This document contains:\n" + msg);
}
</SCRIPT>

Позиционирование элементов

Вы можете всегда определить или установить истинные физические координаты элемента, используя свойства offsetLeft, offsetTop, offsetHeight, offsetWidth. Эти параметры определяют соответственно координаты х и у, высоту и ширину элемента относительно его родителя. В свою очередь, те же свойства имеет родитель. Итак, чтобы определить координату x левого края картинки в ячейке таблицы, мы складываем соответственно offsetLeft картинки, ячейки, таблицы, тела (<BODY>) документа. Чтобы найти координату х правого её края, нужно соответственно прибавить еще и OffsetWidth. Соответственно, offsetParent Для картинки возвращает <td>, для ячейки - <tr>, для <tr> - <table>, для <table> - <body>

var x = document.all.TD1.offsetParent.offsetLeft;

Другой полезный метод - scrollIntoView(true|false).Если true (или параметр не задан), происходит скроллинг документа и искомый элемент появляется около верхнего края экрана, false - нижнего.