Одна из наиболее важных и интересных особенностей объектов
NodeList
и
HTMLCollection
состоит в том, что они не являются статическими слепками документа, а продолжают «жить», и списки элементов, которые они представляют, изменяются по мере изменения документа. Если вызвать метод
getElementsByTagName('div')
для документа, в котором отсутствуют элементы
<div>,
он вернет объект
NodeList
, свойство
length
которого будет равно 0. Если затем вставить в документ новый элемент
<div>,
этот элемент автоматически станет членом коллекции
NodeList
,
а ее свойство
length
станет равно 1.
Обычно такая динамичность элементов
NodeList
и
HTMLCollection
бывает весьма полезна. Однако если добавлять или удалять элементы из документа в процессе итераций по коллекции
NodeList
, потребуется предварительно создать статическую копию объекта
NodeList
:
var snapshot = Array.prototype.slice.call(nodelist, 0);
****************************************
15.2.4. Выбор элементов по классу CSS
Значением HTML-атрибута
class
является список из нуля или более идентификаторов, разделенных пробелами. Он дает возможность определять множества связанных элементов документа: любые элементы, имеющие в атрибуте
class
один и тот же идентификатор, являются частью одного множества. Слово
class
зарезервировано в языке JavaScript, поэтому для хранения значения HTML-атрибута
class
в клиентском JavaScript используется свойство
className
. Обычно атрибут
class
используется вместе с каскадными таблицами стилей CSS, с целью применить общий стиль отображения ко всем членам множества, и мы еще будем рассматривать эту тему в главе 16. Однако кроме этого, стандарт HTML5 определяет метод
getElementsByClassName
, позволяющий выбирать множества элементов документа на основе идентификаторов в их атрибутах
class
.
Подобно методу
getElementsByTagName
, метод
getElementsByClassName
может вызываться и для HTML-документов, и для HTML-элементов, и возвращает «живой» объект
NodeList
, содержащий все потомки документа или элемента, соответствующие критерию поиска. Метод
getElementsByClassName
принимает единственный строковый аргумент, но в самой строке может быть указано несколько идентификаторов, разделенных пробелами. Соответствующими будут считаться все элементы, атрибуты
class
которых содержат все указанные идентификаторы. Порядок следования идентификаторов не имеет значения. Обратите внимание, что и в атрибуте
class
, и в аргументе метода
getElementsByClassName
идентификаторы классов разделяются пробелами, а не запятыми. Ниже приводится несколько примеров использования метода
getElementsByClassName:
// Отыскать все элементы с идентификатором "warning" в атрибуте class
var warnings = document.getElementsByClassName("warning");
// Отыскать всех потомков элемента с именем "log" с идентификаторами "error"
// и "fatal" в атрибуте class
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("fatal error");
Современные броузеры отображают HTML-документы в «режиме совместимости» или в «стандартном режиме», в зависимости от строгости объявления
<!D0C-TYPE>
в начале документа. Режим совместимости поддерживается для сохранения обратной совместимости, и одна из его особенностей состоит в том, что идентификаторы
классов в атрибуте
class
и каскадных таблицах стилей CSS нечувствительны к регистру символов. Метод
getElementsByClassName
следует алгоритму сопоставления, используемому таблицами стилей. Если документ отображается в режиме совместимости, метод сравнивает строки без учета регистра символов. В противном случае сравнение выполняется с учетом регистра символов.
К моменту написания этих строк метод
getElementsByClassName
был реализован во всех текущих броузерах, за исключением IE8 и более ранних версий. Однако IE8 поддерживает метод
querySelectorAll,
описываемый в следующем разделе, на основе которого можно реализовать метод
getElementsByClassName
.
15.2.5. Выбор элементов с использованием селекторов CSS
Каскадные таблицы стилей CSS имеют очень мощные синтаксические конструкции, известные как селекторы, позволяющие описывать элементы или множества элементов документа. Полное описание синтаксиса селекторов CSS выходит далеко за рамки этой книги [34] , однако несколько примеров помогут прояснить их основы. Элементы можно описать с помощью имени тега и атрибутов
id
и
class
:
#nav // Элемент с атрибутом id="nav"
34
Определение селекторов CSS3 можно найти по адресу http://www.w3.org/TR/css3-selec-tors/.
div // Любой элемент <div>
.warning // Любой элемент с идентификатором "warning" в атрибуте class
В более общем случае элементы можно выбирать, опираясь на значения атрибутов:
p[lang="fr”] // Абзац с текстом на французском языке: <р lang="fr">
*[name="x"] // Любой элемент с атрибутом nаше="х"
Эти простейшие селекторы можно комбинировать:
span.fatal.error // Любой элемент <span> с классами "fatal" и "error"
span[lang="fг"].warning // Любое предупреждение на французском языке
С помощью селекторов можно также определять взаимоотношения между элементами:
#log span // Любой элемент <span>, являющийся потомком элемента с id="log"
#log>span // Любой элемент <span>, дочерний по отношению к элементу с id=”log"
body>h1:first-child // Первый элемент <h1>, дочерний по отношению к <body>
Селекторы можно комбинировать для выбора нескольких элементов или множеств элементов:
div, #log // Все элементы <div> плюс элемент с id=”log"
Как видите, селекторы CSS позволяют выбирать элементы всеми способами, описанными выше: по значению атрибута
id
и
name
, по имени тега и по имени класса. Наряду со стандартизацией селекторов CSS3, другой стандарт консорциума W3C, известный как «Selectors АРІ» (API селекторов), определяет методы JavaScript для получения элементов, соответствующих указанному селектору. [35]
35
Стандарт «Selectors АРІ» не является частью стандарта HTML5, но тесно связан с ним. Подробности смотрите по адресу http://www.w3.org/TR/selectors-api/.