Выбор элементов по значению атрибута id

Послание по JS № 7

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа.

Модель DOM определяет несколько способов выборки элементов:

· по значению атрибута id;

· по значению атрибута name;

· по имени тега;

· по имени класса CSS;

· по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов мы с вами сейчас и разберем.

Выбор элементов по значению атрибута id

Все HTML-элементы, с атрибутом id, можно с легкостью выбрать по его значению.

Важно!

HTML элементы в документе не должны иметь одинаковые значения атрибута id.

Выборка по атрибуту id происходит с помощью метода getElementById() объекта Document.

Например:

var section1 = document.getElementById("section1");

Это самый простой и самый распространенный способ выборки элементов.

Поиск элементов по атрибуту name.

Вызов document.getElementsByName(name) позволяет получить все элементы с атрибутом name.

Например, все элементы с именем age:

var elems = document.getElementsByName('age');

До появления стандарта HTML5 этот метод возвращал только те элементы, в которых предусмотрена поддержка атрибута name, в частности: iframe, a, input и другими. В современных браузерах (IE10+) тег не имеет значения.

Поиск элементов по тегу.

Метод elem.getElementsByTagName(tag) ищет все элементы с указанным тегом и возвращает их в виде списка.

Регистр тега не имеет значения.

Например, получить все div-элементы:

var elements = document.getElementsByTagName('div');

Внимание!

В отличие от getElementById, который существует только в контексте document, метод getElementsByTagName может искать внутри любого элемента.

Можно получить всех потомков, передав звездочку '*' вместо тега:

document. getElementsByTagName('*'); // получить все элементы документа

elem. getElementsByTagName('*'); // получить всех потомков элемента elem:

Важно!

Одна из самых частых ошибок начинающих (впрочем, иногда и не только) – это забыть букву "s", то есть пробовать вызывать метод getElementByTagName вместо getElement s ByTagName. Буква "s" не нужна там, где элемент только один, то есть в getElementById, в остальных методах она обязательна.

Выбор элементов по классу CSS

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

Слово class зарезервировано в языке JavaScript, поэтому для хранения значения HTML-атрибута class в клиентском JavaScript используется свойство className.

Стандарт HTML5 определяет метод getElementsByClassName(), позволяющий выбирать множества элементов документа на основе идентификаторов в их атрибутах class.

Важно!

Метод getElementsByClassName() принимает единственный строковый аргумент, но в самой строке может быть указано несколько идентификаторов, разделенных пробелами. Соответствующими будут считаться все элементы, атрибуты class которых содержат все указанные идентификаторы. Порядок следования идентификаторов не имеет значения.

Например:

var warn = document.getElementsByClassName("warn"); // эле­мен­ты с классом "warn".

Современные браузеры отображают HTML-документы в «режиме совместимости» или в «стандартном режиме», в зависимости от строгости объявления в начале документа.

Режим совместимости поддерживается для сохранения обратной совместимости, и одна из его особенностей состоит в том, что идентификаторы классов в атрибуте class и каскадных таблицах стилей CSS нечувствительны к регистру символов.

Навигация по DOM-элементам

После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект Document можно представить, как дерево объектов Node, как изображено на рисунке ниже. Тип Node определяет свойства, позволяющие перемещаться по такому дереву.

Доступ к DOM начинается с объекта document. Из него можно добраться до любых узлов и элементов.

Так выглядят основные ссылки, по которым можно переходить между узлами DOM:

Коллекции – не массивы

DOM-коллекции, такие как childNodes и другие, которые мы увидим далее, не являются JavaScript-массивами. В них нет методов массивов, таких как forEach, map, push, pop и других. Именно поэтому childNodes и называют «коллекция» или «псевдомассив».

Можно для перебора коллекции использовать обычный цикл

for(var i=0;  i<elems.length;  i++)

Соседи и родитель

Доступ к элементам слева и справа можно получить по ссылкам previousSibling или nextSibling.

Родитель доступен через parentNode. Если долго идти от одного элемента к другому, то рано или поздно дойдёшь до корня DOM, то есть до объекта document.

Навигация только по элементам

Навигационные ссылки, описанные выше, равно касаются всех узлов в документе. В частности, в childNodes сосуществуют и текстовые узлы и узлы-элементы и др. если есть.

Но для большинства задач текстовые узлы нам не интересны. Поэтому посмотрим на дополнительный набор ссылок, которые их не учитывают:

Эти ссылки похожи на те, что мы рассматривали раньше, только в ряде мест стоит слово Element, которое и упрощает нам жизнь:

· children – только дочерние узлы-элементы, то есть соответствующие тегам.

· firstElementChild, lastElementChild – первый и последний дети-элементы.

· previousElementSibling, nextElementSibling – соседи-элементы.

Текст: textContent

Свойство textContent содержит только текст внутри элемента, за вычетом всех <тегов>.

Например:

<div>

<h1>Срочно в номер!</h1>

<p>Марсиане атакуют людей!</p>

</div>

<script>

var news = document.body.children[0];

alert(news.textContent); // Срочно в номер! Марсиане атакуют людей!

</script>

Как мы увидим из примера выше, возвращается в точности весь текст, включая переводы строк и пробелы, но без тегов. Иными словами, elem.textContent возвращает конкатенацию всех текстовых узлов внутри elem.

Не сказать, чтобы эта информация была часто востребована. Гораздо полезнее — это возможность записать текст в элемент, причём именно как текст!

Вряд ли мы хотим, чтобы посетители могли вставить в наш сайт произвольный HTML-код. Присваивание через textContent – это один из способов от этого защититься.

Итого

Некоторые основные свойства DOM-узлов:

· innerHTML — Внутреннее содержимое узла-элемента в виде HTML. Можно изменять.

· outerHTML — Полный HTML узла-элемента. При записи в elem.outerHTML переменная elem сохраняет старый узел.

· textContent — Содержит только текст внутри элемента, за вычетом всех тегов. Можно использовать для защиты от вставки произвольного HTML кода

Исследование элементов

У DOM-узлов есть очень много свойств, с которыми мы можем с легкостью работать:

· value – значение для INPUT, SELECT или TEXTAREA

· id – идентификатор

· href – адрес ссылки

· …многие другие…

Узнать, какие свойства есть у данного типа элементов просто. Нужно либо посмотреть список элементов HTML5 и найти в нём интересующий вас элемент и прочитать секцию с interface.

Если же интересуют особенности конкретного браузера – элемент всегда можно вывести в консоль вызовом console.dir(элемент).

Метод console.dir выводит элемент как объект, который можно развернуть и исследовать, например:

console.dir(document); // в консоли можно будет увидеть все свойства DOM-объекта document

Атрибуты и DOM-свойства

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как <body id="page">, то у объекта будет свойство body.id = "page".

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Атрибуты HTML

HTML-элементы состоят из имени тега и множества пар имя/значение, известных как атрибуты. Например, элемент, определяющий гиперссылку, в качестве адреса назначения ссылки использует значение атрибута href.

Значения атрибутов HTML-элементов доступны в виде свойств объектов HTMLElement, представляющих эти элементы. Кроме того, модель DOM определяет механизмы получения и изменения значений нестандартных HTML-атрибутов.

Послание по JS № 7

Выбор элементов документа

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа.

Модель DOM определяет несколько способов выборки элементов:

· по значению атрибута id;

· по значению атрибута name;

· по имени тега;

· по имени класса CSS;

· по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов мы с вами сейчас и разберем.

Выбор элементов по значению атрибута id

Все HTML-элементы, с атрибутом id, можно с легкостью выбрать по его значению.

Важно!

HTML элементы в документе не должны иметь одинаковые значения атрибута id.

Выборка по атрибуту id происходит с помощью метода getElementById() объекта Document.

Например:

var section1 = document.getElementById("section1");

Это самый простой и самый распространенный способ выборки элементов.