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

Флэнаган Дэвид
Шрифт:

Обычно такая динамичность элементов

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аше="х"