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

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():

<b>// Отыскать все элементы с идентификатором &quot;warning&quot; в атрибуте class </b>

var warnings = document.getElementsByClassName("warning");

<b>// Отыскать всех потомков элемента с именем &quot;log&quot; с идентификаторами &quot;error&quot;</b>

// и "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"

div // Любой элемент <div>

<b>.warning // Любой элемент с идентификатором &quot;warning&quot; в атрибуте class</b>

В более общем случае элементы можно выбирать, опираясь на значения атрибутов:

<b>p[lang=&quot;fr”] // Абзац с текстом на французском языке: &lt;р lang=&quot;fr&quot;&gt;</b>

*[name="x"] // Любой элемент с атрибутом nаше="х"

Эти простейшие селекторы можно комбинировать:

<b>span.fatal.error // Любой элемент &lt;span&gt; с классами &quot;fatal&quot; и &quot;error&quot;</b>

<b>span[lang=&quot;fг&quot;].warning // Любое предупреждение на французском языке</b>

С помощью селекторов можно также определять взаимоотношения между элементами:

<b>#log span // Любой элемент &lt;span&gt;, являющийся потомком элемента с id=&quot;log&quot;</b>

<b>#log&gt;span // Любой элемент &lt;span&gt;, дочерний по отношению к элементу с id=”log&quot; </b>

<b>body&gt;h1:first-child // Первый элемент &lt;h1&gt;, дочерний по отношению к &lt;body&gt;</b>

Селекторы можно комбинировать для выбора нескольких элементов или множеств элементов: