Выборка элементов страницы в javascript

document.getElementById или просто id

Если у элемента есть атрибут , то мы можем получить его вызовом , где бы он ни находился.

Например:

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

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Пожалуйста, не используйте такие глобальные переменные для доступа к элементам

Это поведение соответствует , но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

В этом учебнике мы будем обращаться к элементам по в примерах для краткости, когда очевидно, откуда берётся элемент.

В реальной жизни лучше использовать .

Значение должно быть уникальным

Значение должно быть уникальным. В документе может быть только один элемент с данным .

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

Только , а не

Метод можно вызвать только для объекта . Он осуществляет поиск по по всему документу.

Значения параметров

Параметр

Описание

selectors

Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. В этом случае будет выбран первый найденный элемент из заданных селекторов. Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты («\»). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Живые коллекции

Все методы возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом ниже примере есть два скрипта.

1. Первый создаёт ссылку на коллекцию . На этот момент её длина равна .
2. Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – .

Напротив, возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.

Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную :

Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового в документе.

HTML-атрибуты

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

Таким образом, когда у элемента есть или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Например:

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

Мы можем увидеть это на примере ниже:

Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

Конечно. Все атрибуты доступны с помощью следующих методов:

• – проверяет наличие атрибута.
• – получает значение атрибута.
• – устанавливает значение атрибута.
• – удаляет атрибут.

Эти методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства : коллекция объектов, которая принадлежит ко встроенному классу со свойствами и .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

• Их имена регистронезависимы ( то же самое, что и ).
• Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

– здесь первая буква заглавная, а в HTML – строчная

Но это не важно: имена атрибутов регистронезависимы.
Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение .
Все атрибуты, в том числе те, которые мы установили, видны в .
Коллекция является перебираемой

В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами и .

Методы Selection

Методы Selection для добавления и удаления диапазонов:

• – взять i-ый диапазон, начиная с . Во всех браузерах, кроме Firefox, используется только .
• – добавить в выделение. Все браузеры, кроме Firefox, проигнорируют этот вызов, если в выделении уже есть диапазон.
• – удалить из выделения.
• – удалить все диапазоны.
• – сокращение для .

Также существуют методы управления диапазонами выделения напрямую, без обращения к Range:

• – заменить выделенный диапазон новым, который начинается и заканчивается на , на позиции .
• – то же самое, что (дублирующий метод-псевдоним).
• – схлопнуть (заменить на пустой диапазон) к началу выделения,
• – схлопнуть диапазон к концу выделения,
• – переместить фокус выделения к данному , с позиции ,
• – заменить диапазон выделения на заданные начало и конец . Будет выделено всё содержимое между этими границами
• – выделить все дочерние узлы данного узла .
• – удалить содержимое выделения из документа.
• – проверяет, содержит ли выделение (частично, если второй аргумент равен )

Так что для многих задач мы можем вызывать методы , не обращаясь к связанному объекту .

К примеру, выделение всего параграфа :

То же самое с помощью :

Чтобы что-то выделить, сначала снимите текущее выделение

Если выделение уже существует, сначала снимите его, используя , и только затем добавляйте новые диапазоны. В противном случае все браузеры, кроме Firefox, проигнорируют добавление.

Исключением являются некоторые методы выделения, которые заменяют существующее выделение, например, .

Значения параметров

Параметр

Описание

selectors

Аргумент должен соответствовать допустимой строке селектора, содержащей один или несколько селекторов. При указании нескольких селекторов необходимо разделять значения запятыми. Если по какой-то причине вы используете в наименовании селекторов символы, которые не являются частью стандартного синтаксиса CSS, то при поиске такие символы должны быть экранированы с помощью символа обратной косой черты («\»). Поскольку обратная косая черта также является специальным символом (escape) в JavaScript, то при вводе литеральной строки ее необходимо экранировать дважды. Обязательный параметр.

Introduction to JavaScript querySelector() and querySelectorAll() methods

The is a method of the interface. The allows you to find the first element that matches one or more CSS selectors.

You can call the method on the or any HTML element.

The following illustrates the syntax of the method:

In this syntax, the is a CSS selector or a group of CSS selectors to match the descendant elements of the .

If the is not valid CSS syntax, the method will raise a exception.

If no element matches the CSS selectors, the returns .

Besides the , you can use the method to find all elements that match a CSS selector or a group of CSS selector:

The method returns a static of elements that match the CSS selector. If no element found, it returns an empty .

Note that the is an array-like object, not an array object. However, in modern web browsers, you can use the method like the one in the array object.

To convert the to an array, you use the method like this:

textContent: просто текст

Свойство предоставляет доступ к тексту внутри элемента за вычетом всех .

Например:

Как мы видим, возвращается только текст, как если бы все были вырезаны, но текст в них остался.

На практике редко появляется необходимость читать текст таким образом.

Намного полезнее возможность записывать текст в , т.к. позволяет писать текст «безопасным способом».

Представим, что у нас есть произвольная строка, введённая пользователем, и мы хотим показать её.

• С вставка происходит «как HTML», со всеми HTML-тегами.
• С вставка получается «как текст», все символы трактуются буквально.

Сравним два тега div:

1. В первый имя приходит «как HTML»: все теги стали именно тегами, поэтому мы видим имя, выделенное жирным шрифтом.
2. Во второй имя приходит «как текст», поэтому мы видим .

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

Определение и применение

JavaScript метод document.querySelector() возвращает первый элемент в документе (объект Element), соответствующий указанному селектору, или группе селекторов. Если совпадений не найдено, то возвращается значение null.

Обращаю Ваше внимание на то, что не допускается использование CSS псевдоэлементов в качестве значения селектора для поиска элементов, в этом случае в качестве возвращаемого значения всегда будет значение null. Если вам необходим список всех элементов, соответствующих указанному селектору или селекторам, то используйте для этого метод querySelectorAll()

Если вам необходим список всех элементов, соответствующих указанному селектору или селекторам, то используйте для этого метод querySelectorAll().

Метод .querySelector() также определен в объекте Element, по этой причине он может быть вызван на любом элементе, не только на объекте document. Элемент на котором он вызывается будет использован в качестве корневого элемента для поиска.

getElementsByClassName

Возвращает группу элементов (поэтому и Elements), в которых присутствует искомый класс. Отличительная особенность от предыдущего метода — дозволено указать элемент, относительно которого начинать поиск. Это может быть и document — выбирать элементы на всей странице, либо указатель на определённый блок. Например, получим все элементы с классом .da внутри контейнера #go.

После выполнения кода в массиве elems будут содержаться 3 элемента: .one, .two и .three.

Если же требуется получить всё на странице, достаточно сделать так:

К трём элементам выше добавится ещё один — #go (как видно из кода, ему тоже присвоен класс .da).

К сожалению, данный метод не поддерживается в Internet Explorer версии 8 и ниже. Это значит, что все обладатели Windows XP оказываются в пролёте. Можно сделать свою реализацию функции, которая оббежит все теги на странице и отберёт лишь те, className которых соответствует условию, но есть более удобные методы для работы.

getElementsBy*

There are also other methods to look for nodes by a tag, class, etc.

Today, they are mostly history, as is more powerful and shorter to write.

So here we cover them mainly for completeness, while you can still find them in the old scripts.

• looks for elements with the given tag and returns the collection of them. The parameter can also be a star for “any tags”.
• returns elements that have the given CSS class.
• returns elements with the given attribute, document-wide. Very rarely used.

For instance:

Let’s find all tags inside the table:

Don’t forget the letter!

Novice developers sometimes forget the letter . That is, they try to call instead of .

The letter is absent in , because it returns a single element. But returns a collection of elements, so there’s inside.

It returns a collection, not an element!

Another widespread novice mistake is to write:

That won’t work, because it takes a collection of inputs and assigns the value to it rather than to elements inside it.

We should either iterate over the collection or get an element by its index, and then assign, like this:

Looking for elements:

querySelectorAll

Последний метод, но не по значению. Всего одним запросом вы получаете целую пачку элементов, расположенных в разных блоках, принадлежащие определённому классу и т. п.

Вернёт 2 элемента: .one и .two. Метод примечателен тем, что отсеивает дубли — можно не беспокоиться, что в результирующую выборку будут включены элементы, соответствующие каждой цепочке селекторов. Например:

Будет содержать 3 элемента: .one, .two и .three, а не 4, как можно было подумать (из-за второго правила .one).

Оба метода querySelector* применимы не только к document, но и к конкретному элементу. В некоторых ситуациях это очень удобно.

Было бы просто свинством, если я, рассказав про выборки, не привёл бы пример их использования. Единичные элементы, возвращаемые с помощью getElementById или querySelector, уже являются ссылкой и готовы к дальнейшим манипуляциям. Остальные выборки возвращают массивы. Но это не такая большая проблема, как может показаться; просто пробежим по всем элементам и каждому присвоим нужное свойство. Пусть это будет что-то совсем простое — сделать цвет текста красным.

Вот и всё. Теперь и вы, уважаемый читатель, познали дзэн и способны делать удивительные вещи.

Поддержка сайта
С удовольствием создаю годный контент. Буду очень признателен, если вы поддержите мои усилия:

днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости

продлением хостинга на +1 месяц

2 070

не в сети 1 месяц

nodeValue/data: содержимое текстового узла

Свойство есть только у узлов-элементов.

У других типов узлов, в частности, у текстовых, есть свои аналоги: свойства и . Эти свойства очень похожи при использовании, есть лишь небольшие различия в спецификации. Мы будем использовать , потому что оно короче.

Прочитаем содержимое текстового узла и комментария:

Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии?

Иногда их используют для вставки информации и инструкций шаблонизатора в HTML, как в примере ниже:

…Затем JavaScript может прочитать это из свойства и обработать инструкции.

Трюки

Итак, а с чем же его можно есть?

Если Вы осуществляете траверс по селектору без использования и других специфичных для jQ псевдоклассов, можно использовать

$(document.querySelectorAll("#myDiv p"))

вместо

$("#myDiv p")

На обертывание staticNodeList в объект jQuery, конечно, уйдет какое-то время, но, в целом, такой код выполнится быстрее.

При помощи qSA можно достаточно просто определить, наведен ли курсор на элемент.
Пример (Opera, Safari, Chrome):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<style type="text/css">
			.samplediv {
				border: dashed red 1px;
				margin: 30px;
			}
			.samplediv #hovered {display: none}
			.samplediv:hover #hovered {display: inline}
			.samplediv:hover #nothovered {display: none}
		</style>
	</head>
	<body>
		<div class="samplediv" id="test">
			<p>Javascript: <span id="status">I am not hovered</span></p>
			<p>Css: <span id="nothovered">I am not hovered</span><span id="hovered">I am hovered</span></p>
		</div>
		<script type="text/javascript">
			function isHovered(o){return (o.parentNode && o.parentNode.querySelector(":hover") == o);}
			
			document.getElementById("test").addEventListener('mouseover', function(){
				if (isHovered(this)) document.getElementById("status").innerHTML = "I am hovered";
			}, false);
			document.getElementById("test").addEventListener('mouseout', function(){
				if (!isHovered(this)) document.getElementById("status").innerHTML = "I am not hovered";
			}, false);
		</script>
	</body>
</html>

В Firefox 3.6 статус так и останется залипшим на «hovered». Это связано с тем, что в этом замечательном браузере на момент css-стиль еще не обновился. При этом на работает отлично. Т.е, выходит, что Firefox обновляет css между и . По-моему, это нелогично и неправильно. Разработчики Firefox, поправьте это, пожалуйста!

Но вернемся к функции . Работает она на одном достаточно простом предположении: если у родителя элемента есть элементы, на которые наведен курсор, и один из этих элементов (нулевой в массиве, траверс начинается с непсредственных детей) — сам исходный элемент, то на исходный элемент наведен курсор.

У родитель — , соответственно, код тоже работает. У же родителя нет, но и hover для него бессмысленнен.

Как Вы уже, наверное, догадались, таким же нехитрым способом можно определить, а какой же инпут имеет фокус сразу при загрузке страницы.

document.querySelector(":focus")

Summary

There are 6 main methods to search for nodes in DOM:

Method	Searches by…	Can call on an element?	Live?
	CSS-selector		—
	CSS-selector		—
		—	—
		—
	tag or
	class

By far the most used are and , but can be sporadically helpful or found in the old scripts.

Besides that:

• There is to check if matches the given CSS selector.
• There is to look for the nearest ancestor that matches the given CSS-selector. The itself is also checked.

And let’s mention one more method here to check for the child-parent relationship, as it’s sometimes useful:

elemA.contains(elemB) returns true if elemB is inside elemA (a descendant of elemA) or when elemA==elemB.

Создание элемента из чистого HTML

Метод insertAdjacentHTML позволяет нам вставлять необработанный HTML в документ, но что, если мы хотим создать элемент из необработанного HTML и использовать его позже?

Для этого мы можем использовать объект DomParser и его метод parseFromString. DomParser предоставляет возможность разбора исходного кода HTML или XML в документ DOM.

Используем метод parseFromString для создания документа только с одним элементом и возвратом только этого элемента:

const createElement = domString => new DOMParser().parseFromString(domString, 'text/html').body.firstChild;

const a = createElement('<a href="/home" class="active">Home</a>');

Проверка DOM

Стандартный DOM API также предоставляет несколько удобных методов для проверки DOM. Например, matches определяет, будет ли элемент соответствовать определенному селектору:

<p class="foo">Hello world</p>

const p = document.querySelector('p');

p.matches('p');     // true
p.matches('.foo');  // true
p.matches('.my-class');  // false, нет класса "my-class"

Вы также можете проверить, является ли элемент дочерним по отношению к другому элементу с помощью метода contains:

<div class="container">
  <h1 class="title">Foo</h1>
</div>

<h2 class="subtitle">Bar</h2>

const container = document.querySelector('.container');
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');

container.contains(h1);  // true
container.contains(h2);  // false

Вы можете получить еще более подробную информацию об элементах с помощью метода compareDocumentPosition. Этот метод позволяет определить, предшествует ли один элемент другому элементу или следует за ним, или же один из этих элементов содержит другой. Возвращает целое число, которое представляет отношение между сравниваемыми элементами.

Вот пример с теми же элементами из предыдущего примера:

<div class="container">
  <h1 class="title">Foo</h1>
</div>

<h2 class="subtitle">Bar</h2>

const container = document.querySelector('.container');
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');

//  20: h1 содержится в контейнере и следует за контейнером
container.compareDocumentPosition(h1); 

// 10: контейнер содержит h1 и предшествует ему
h1.compareDocumentPosition(container);

// 4: h2 следует за h1
h1.compareDocumentPosition(h2);

// 2: h1 предшествует h2
h2.compareDocumentPosition(h1);

Значение, возвращаемое из compareDocumentPosition, представляет собой целое число, биты которого представляют отношение между узлами относительно аргумента, данного этому методу.

Итак, учитывая синтаксис node.compareDocumentPostion (otherNode), возвращаемое значение будет:

• 1: узлы не являются частью одного и того же документа
• 2:  предшествует 
• 4:  следует за 
• 8:  содержит 
• 16:  содержится в 

Может быть установлено более одного бита, поэтому в приведенном выше примере container.compareDocumenPosition (h1) возвращает 20, где можно ожидать 16, поскольку h1 содержится в container. Но h1 также следует за container (4), поэтому полученное значение равно 16 + 4 = 20.

document.getElementById or just id

If an element has the attribute, we can get the element using the method , no matter where it is.

For instance:

Also, there’s a global variable named by that references the element:

…That’s unless we declare a JavaScript variable with the same name, then it takes precedence:

Please don’t use id-named global variables to access elements

This behavior is described , so it’s kind of standard. But it is supported mainly for compatibility.

The browser tries to help us by mixing namespaces of JS and DOM. That’s fine for simple scripts, inlined into HTML, but generally isn’t a good thing. There may be naming conflicts. Also, when one reads JS code and doesn’t have HTML in view, it’s not obvious where the variable comes from.

Here in the tutorial we use to directly reference an element for brevity, when it’s obvious where the element comes from.

In real life is the preferred method.

The must be unique

The must be unique. There can be only one element in the document with the given .

If there are multiple elements with the same , then the behavior of methods that use it is unpredictable, e.g. may return any of such elements at random. So please stick to the rule and keep unique.

Only , not

The method can be called only on object. It looks for the given in the whole document.

Добавление новых элементов

Код для добавления одного или нескольких элементов в дерево DOM печально известен быстрым ростом количеством требуемых строк. Допустим, вы хотите добавить следующую ссылку на свою страницу:

<a href="/home" class="active">Home</a>

Вам нужно будет сделать:

const link = document.createElement('a');
link.setAttribute('href', '/home');
link.className = 'active';
link.textContent = 'Home';document.body.appendChild(link);

Теперь представьте, что нужно сделать это для 10 элементов …

По крайней мере, jQuery позволяет вам сделать это намного быстрее:

$('body').append('<a href="/home" class="active">Home</a>');

Ну догадайся что? Есть нативный эквивалент insertAdjacentHTML:

document.body.insertAdjacentHTML('beforeend', 
'<a href="/home" class="active">Home</a>');

Метод insertAdjacentHTML позволяет вставить произвольную допустимую строку HTML в DOM в четырех позициях, указанных первым параметром:

• : перед элементом
• : внутри элемента до его первого потомка
• : внутри элемента после его последнего потомка
• : после элемента

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Это также значительно упрощает указание точной точки, где новый элемент должен быть вставлен. Скажем, вы хотите вставить <a> прямо перед этим <p>. Без insertAdjacentHTML вы бы сделали это:

const link = document.createElement('a');
const p = document.querySelector('p');
p.parentNode.insertBefore(link, p);

Теперь вы можете просто сделать:

const p = document.querySelector('p');
p.insertAdjacentHTML('beforebegin', '<a></a>');

Существует также эквивалентный метод для вставки элементов DOM:

const link = document.createElement('a');
const p = document.querySelector('p');
p.insertAdjacentElement('beforebegin', link);

и текста:

p.insertAdjacentText('afterbegin', 'foo');

Сделать что-то невыделяемым

Существуют три способа сделать что-то невыделяемым:

1. Используйте CSS-свойство .

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

   После этого станет частью , так что на самом деле выделение произойдёт, но его содержимое обычно игнорируется при копировании и вставке.

2. Предотвратить действие по умолчанию в событии или .

   Этот способ также не даёт начать выделение с , но пользователь может начать с другого элемента, а затем расширить выделение до .

   Это удобно, когда есть другой обработчик события на том действии, которое запускает выделение (скажем, ). Так что мы отключаем выделение, чтобы избежать конфликта.

   А содержимое при этом может быть скопировано.

3. Мы также можем очистить выделение после срабатывания с помощью . Этот способ используется редко, так как он вызывает нежелаемое мерцание при появлении и исчезновении выделения.

Что же это такое?

Наверняка, Вы знакомы с jQuery. И наверняка знаете про функцию , возвращающую элементы, соответствующие css-селектору (в ранних версиях можно было еще использовать XPath, но потом от него отказались).

Так вот, делает то же самое, но нативными средствами браузера.

Этот метод есть у всех элементов и документа. В случае, если метод вызывается у элемента, поиск по селетору производится среди всех элементов, вложенных в него.

Тектовые ноды, комментарии, CDATA-секции выбрать этим методом нельзя, только элементы.

Поддерживается всеми современными браузерами, Internet Explorer — начиная с версии 8.

Так вот, почти то же самое, что и , но возвращает только один (первый попавшийся) элемент, либо Null.

События при выделении

Существуют события, позволяющие отслеживать выделение:

• – когда с elem начинается выделение, например пользовать начинает двигать мышкой с зажатой кнопкой.
• – когда выделение изменено.

Ниже представлено небольшое демо.
В нём границы выделения выводятся динамически по мере того, как оно меняется:

Чтобы получить всё выделение:

• Как текст: просто вызовите .
• Как DOM-элементы: получите выделенные диапазоны и вызовите их метод (только первый диапазон, если мы не поддерживаем мультивыделение в Firefox).

Ниже представлено демо получения выделения как в виде текста, так и в виде DOM-узлов:

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода document.querySelectorAll() (перебор элементов в цикле)</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<div class = "block">Первый блок</div>
		<div class = "block">Второй блок</div>
		<div class = "block">Третий блок</div>
		<script>
	function myFunc() {
	  let blocks = document.querySelectorAll( ".block" ); // находим все элементы с классом block
	  for( let i = 0; i blocks.length; i++){ // проходим циклом по всем элементам объекта
	    blocks[i].style.color = "red"; // устанавливаем красный цвет текста каждому элементу
	  }		
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода document.querySelectorAll() выбирает все элементы с классом block и инициализируем переменную этим значением (объект NodeList). После этого мы проходим циклом по всем элементам этого массивоподобного объекта (объект NodeList) и устанавливаем зеленый цвет текста каждому элементу.

Результат нашего примера:

Пример использования JavaScript метода document.querySelectorAll() (перебор элементов в цикле)

В следующем примере мы рассмотрим различные методы поиска элементов с использованием метода , осуществляя при этом поиск внутри другого элемента, а не всего документа:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода document.querySelectorAll()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<div id = "first">Первый блок<span class = "test"></span></div>
		<div>Второй блок</div>
		<div>Третий блок</div>
		<script>
	function myFunc() {
	  let first = document.querySelectorAll( "#first" ),   // находим элементы с id first
	      second = document.querySelectorAll( "div:nth-of-type(2)" ), // находим каждый элемент div, который является вторым дочерним элементом своего родительского элемента
	      third = document.querySelectorAll( ":last-of-type" );   // находим каждый элемент div, который является последним из элементов своего родительского элемента
    
	  first.style.color = "red";    // изменяем цвет текста у первого элемента коллекции
	  second.style.color = "green"; // изменяем цвет текста у первого элемента коллекции
	  third.style.color = "blue";   // изменяем цвет текста у первого элемента коллекции

	  first.querySelectorAll( ".test" ).innerHTML=" !!!"; // находим внутри первого элемента коллекции элементы с классом test и изменяем их текстовое содержимое		
	  	  }
		</script>
	</body>
</html>

В этом примере мы с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода querySelectorAll() выбирает следующие элементы:

• Элементы с глобальным атрибутом id равным first и устанавливаем найденному элементу красный цвет текста.
• Каждый элемент <div>, который является вторым дочерним элементом своего родительского элемента и устанавливаем найденному элементу зеленый цвет текста.
• Каждый элемент <div>, который является последним из элементов своего родительского элемента и устанавливаем найденному элементу синий цвет текста.
• И в заключении мы вызываем метод .querySelectorAll() на первом элементе коллекции, содержащейся в переменной first и находим элемент с классом test внутри этого элемента, которому с помощью метода innerHTML() устанавливаем новое текстовое содержимое.

Результат нашего примера:

Пример использования JavaScript метода document.querySelectorAll()JavaScript Document

5 последних уроков рубрики «Разное»

• Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

• Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

  Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

• Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

• Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Поиск вверх по дереву DOM

Использование CSS-селекторов для выбора элементов DOM означает, что мы можем перемещаться только по дереву DOM. Нет CSS-селекторов для перемещения вверх по дереву, чтобы выбрать родителей.

Но мы можем перемещаться вверх по дереву DOM с помощью метода closest(), который также принимает любой допустимый селектор CSS:

document.querySelector('p').closest('div');

Это найдет ближайший родительский элемент абзаца, выбранный document.querySelector (‘p’). Вы можете связать эти вызовы, чтобы идти дальше вверх по дереву:

document.querySelector('p').closest('div').closest('.content');

Вызываем и создаем события

Вы можете вручную вызывать события с помощью в jQuery, а также в чистом JS при помощи . Метод может быть вызван совершенно на любом элементе и берёт , как первый аргумент:

// C jQuery// Вызываем myEvent на документе и .box$(document).trigger("myEvent");$(".box").trigger("myEvent");// Без jQuery// Создаем и запускаем myEventdocument.dispatchEvent(new Event("myEvent"));document.querySelector(".box").dispatchEvent(new Event("myEvent"));

Стилизация элементов

Если вы вызываете на элементе, чтобы поменять его CSS инлайново с помощью jQuery, то этого же эффекта вы можете добиться с помощью в чистом JavaScript.

// С jQuery// Выбирает .box и меняет его цвет текста на #000$(".box").css("color", "#000");// Без jQuery// Выбирает первый .box и меняет его цвет текста на #000document.querySelector(".box").style.color = "#000";

С jQuery вы можете передать объект с парами ключ-значения, чтобы стилизовать уже большое количество свойств за раз. В JavaScript вы можете выставить только одно значение за раз или указать вcе стили одной строкой:

// С jQuery// Передаем несколько стилей$(".box").css({  "color": "#000",  "background-color": "red"});// Без jQuery// Выставляем цвет на #000 и делаем фон краснымvar box = document.querySelector(".box");box.style.color = "#000";box.style.backgroundColor = "red";// Выставляем все стили разом, но перезаписываем уже существующиеbox.style.cssText = "color: #000; background-color: red";