Чтение онлайн

на главную - закладки

Жанры

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

for(var і = 0; і < document.images.length; i++) // Обойти все изобр.

document.images[і].style.display = "none"; // ...и скрыть их.

Для объектов

NodeList
и
HTMLCollection
нельзя непосредственно вызывать методы класса
Array
, но их можно вызывать косвенно:

var content = Array.prototype.mар.call(

document.getElementsByTagName("p"),

function(e) { return e.innerHTML; });

Объекты

HTMLCollection
могут иметь дополнительные именованные свойства и могут индексироваться не только числами, но и строками.

По историческим причинам оба объекта,

NodeList
и
HTMLCollection
, могут также играть роль функций: вызов их с числовым или строковым аргументом равносилен операции индексирования числом или строкой. Однако использование этой причудливой особенности может сбивать с толку.

Интерфейсы обоих объектов,

NodeList
и
HTMLCollection
, проектировались под другие языки программирования, не такие динамические, как JavaScript. Оба определяют метод
item.
Он принимает целое число и возвращает элемент с этим индексом. Однако в программах на языке JavaScript нет нужды использовать этот метод, так как можно использовать простую операцию индексирования массива. Аналогично
HTMLCollection
определяет метод
namedltem,
возвращающий значение именованного свойства, но в программах на языке JavaScript вместо него можно использовать операции индексирования массива и обращения к свойствам.

Одна из наиболее важных и интересных особенностей объектов

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

Поделиться:
Популярные книги

Первый среди равных. Книга VIII

Бор Жорж
8. Первый среди Равных
Фантастика:
аниме
фантастика: прочее
эпическая фантастика
попаданцы
5.00
рейтинг книги
Первый среди равных. Книга VIII

Телохранитель Генсека. Том 2

Алмазный Петр
2. Медведев
Фантастика:
попаданцы
альтернативная история
6.25
рейтинг книги
Телохранитель Генсека. Том 2

Наследник для дона мафии

Тоцка Тала
2. Наследники мафии
Любовные романы:
остросюжетные любовные романы
эро литература
5.00
рейтинг книги
Наследник для дона мафии

Бастард Императора. Том 11

Орлов Андрей Юрьевич
11. Бастард Императора
Фантастика:
городское фэнтези
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Бастард Императора. Том 11

Война

Валериев Игорь
7. Ермак
Фантастика:
боевая фантастика
альтернативная история
5.25
рейтинг книги
Война

Князь Целитель 5

Ткачев Андрей Юрьевич
5. Князь Целитель
Фантастика:
боевая фантастика
городское фэнтези
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Князь Целитель 5

Наемный корпус

Вайс Александр
5. Фронтир
Фантастика:
боевая фантастика
космическая фантастика
космоопера
5.00
рейтинг книги
Наемный корпус

Хозяин Стужи 3

Петров Максим Николаевич
3. Злой Лед
Фантастика:
аниме
фэнтези
попаданцы
7.00
рейтинг книги
Хозяин Стужи 3

Тринадцатый

Северский Андрей
Фантастика:
фэнтези
рпг
7.12
рейтинг книги
Тринадцатый

Антимаг

Гедеон Александр и Евгения
1. Антимаг
Фантастика:
фэнтези
6.95
рейтинг книги
Антимаг

Имперец. Том 5

Романов Михаил Яковлевич
4. Имперец
Фантастика:
попаданцы
альтернативная история
аниме
6.00
рейтинг книги
Имперец. Том 5

Князь Целитель 4

Ткачев Андрей Юрьевич
4. Князь Целитель
Фантастика:
боевая фантастика
городское фэнтези
аниме
фэнтези
5.00
рейтинг книги
Князь Целитель 4

Законы Рода. Том 8

Мельник Андрей
8. Граф Берестьев
Фантастика:
юмористическое фэнтези
аниме
фэнтези
5.00
рейтинг книги
Законы Рода. Том 8

Андер Арес

Грехов Тимофей
1. Андер Арес
Фантастика:
рпг
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Андер Арес