JavaScript. Подробное руководство, 6-е издание, стр. 221

 // Цикл, накапливающий смещения

 for(var е = elt; е != null; е = е.offsetParent) {

 х += e.offsetLeft;

 у += e.offsetTop;

 }

<b>  // Еще раз обойти все элементы-предки, чтобы вычесть смещения прокрутки.</b>

<b>  // Он также вычтет позиции главных полос прокрутки и преобразует</b>

 // значения в координаты видимой области.

 for(var e=elt.parentNode; е != null && e.nodeType == 1; e=e.parentNode) {

 x -= e.scrollLeft; у -= e.scrollTop;

 }

 return {x:x, y:y};

}

В современных броузерах этот метод

getElementPos()

возвращает те же координаты, что и метод

getBoundingClientRect()

(но он менее эффективен). Теоретически такая функция, как

getElementPos(),

могла бы использоваться в броузерах, не поддерживающих метод

getBoundingClientRect().

Однако броузеры, не поддерживающие

getBoundingClientRect(),

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

getBoundingClientRect(),

то для этих целей лучше использовать библиотеку, например, jQuery.

15.9. HTML-формы

HTML-элемент

<form>

и различные элементы ввода, такие как

<input>, <select>

<button>

, занимают видное место в разработке клиентских сценариев. Эти HTML-элементы появились в самом начале развития Всемирной паутины, еще до появления языка JavaScript. Формы HTML - это механизм веб-приложений первого поколения, не требующий применения JavaScript. Ввод пользователя собирается в элементах форм; затем форма отправляется на сервер; сервер обрабатывает ввод и генерирует новую HTML-страницу (обычно с новыми элементами форм) для отображения на стороне клиента.

Элементы HTML-форм по-прежнему остаются великолепным инструментом получения данных от пользователя, даже когда данные формы целиком обрабатываются JavaScript-сценарием на стороне клиента и не должны отправляться на сервер. С точки зрения программиста, разрабатывающего серверные сценарии, форма оказывается совершенно бесполезной, если в ней отсутствует кнопка отправки формы. Однако с точки зрения программиста, разрабатывающего клиентские сценарии, кнопка отправки вообще не нужна (хотя все еще может использоваться). Серверные программы опираются на механизм отправки форм - они обрабатывают данные порциями, объем которых определяется формой, - и это ограничивает их интерактивные возможности. Клиентские программы опираются на механизм событий - они могут откликаться на события, возникающие в отдельных элементах форм, - и это позволяет обеспечить более высокую степень интерактивности. Например, клиентская программа может проверять ввод пользователя по мере нажатия клавиш. Или откликаться на выбор флажка, разрешая доступ к набору параметров, которые имеют смысл, только когда флажок отмечен.

В следующих подразделах описывается, как реализовать подобные операции при работе с HTML-формами. Формы конструируются из HTML-элементов, как и любые другие части HTML-документа, и ими можно управлять с помощью методов модели DOM, описанных выше в этой главе. Элементы формы стали первыми элементами, для которых было предусмотрено программное управление на самых ранних этапах развития клиентского JavaScript, поэтому они поддерживают некоторые дополнительные функции, предшествовавшие появлению DOM.

Обратите внимание, что в этом разделе описываются не сам язык разметки HTML, а приемы управления HTML-формами. Здесь предполагается, что вы уже имеете некоторое знакомство с HTML-элементами (

<input>, <textarea>, <select>

и т. д), используемыми для создания форм. Тем не менее в табл. 15.1 для справки приводится список наиболее часто используемых элементов форм. Дополнительные сведения о функциях для работы с формами и элементами форм можно узнать в четвертой части книги, в справочных статьях

Form, Input, Option, Select

TextArea

JavaScript. Подробное руководство, 6-е издание - i_024.jpg

JavaScript. Подробное руководство, 6-е издание - i_025.jpg

15.9.1. Выбор форм и элементов форм

Формы и элементы, содержащиеся в них, можно выбрать с помощью стандартных методов, таких как

getElementByld()

getElementsByTagName():

var fields = document.getElementById("address").getElementsByTagName("input");

В броузерах, поддерживающих

querySelectorAll(),

можно выбрать все радиокнопки или все элементы с одинаковыми именами, присутствующие в форме, как показано ниже:

// Все радиокнопки в форме с атрибутом id=”shipping" 

document.querySelectorAll('«shipping input[type="radio"]');

<b>// Все радиокнопки с атрибутом name=&quot;method&quot; в форме с атрибутом id=&quot;shipping&quot; </b>

document.querySelectorAll('«shipping input[type="radio"][name="method"]');

Однако, как описывалось в разделах 14.7,15.2.2 и 15.2.3, элемент

<form>

с установленным атрибутом

name

или

id

можно также выбрать другими способами. Элемент

<form>

с атрибутом

name="address"

можно выбрать любым из следующих способов: