Javascript метод parentnode.queryselectorall()

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

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

Например:

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

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

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

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

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

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

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

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

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

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

Только , а не

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Другие свойства

У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса:

• – значение для , и (, …).
• – адрес ссылки «href» для ().
• – значение атрибута «id» для всех элементов ().
• …и многие другие…

Например:

Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ.

Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс описывается здесь: .

Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя , и прочитать все свойства. Или исследовать «свойства DOM» во вкладке Elements браузерных инструментов разработчика.

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

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

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

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

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

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

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

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

Параметр

Описание

selectors

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

elem.querySelector(query), elem.querySelectorAll(query)

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

Он просто перебирает все подэлементы внутри элемента (или по всему документу, если вызов в контексте документа) и проверяет каждый элемент на соответствие запросу .

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

Этот перебор происходит очень быстро, так как осуществляется непосредственно движком браузера, а не JavaScript-кодом.

Оптимизации:

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

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.

Свойства Selection

Аналогично диапазону, выделение имеет начальную границу, именуемую «якорем», и конечную, называемую «фокусом».

Основные свойства выделения:

• – узел, с которого начинается выделение,
• – смещение в , где начинается выделение,
• – узел, на котором выделение заканчивается,
• – смещение в , где выделение заканчивается,
• – , если диапазон выделения пуст или не существует.
• – количество диапазонов в выделении, максимум во всех браузерах, кроме Firefox.

Конец выделения может быть в документе до его начала

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

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

Если начало (якорь) выделения идёт в документе перед концом (фокус), говорят, что такое выделение «направлено вперёд».

К примеру, если пользователь начинает выделение с помощью мыши в направлении от «Example» до «italic»:

Иначе, если выделение идёт от «italic» до «Example», выделение идёт в «обратном» направлении, его фокус будет перед якорем:

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

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:

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

Код для добавления одного или нескольких элементов в дерево 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');

Подписка на событие через код JavaScript с помощью свойства

Этот способ подписки на событие осуществляется через код JavaScript с помощью задания элементу свойства . Основной принцип данного метода заключается в следующем:

1. Найти элемент (объект) в DOM-дереве, на событие которого Вы хотите подписаться.
2. Добавить найденному объекту свойство, которое должно иметь следующий вид:
   , где — это имя определённого события.После этого необходимо данному свойству присвоить обработчик, т.е. безымянную или некоторую указанную функцию, которая будет выполняться при наступлении этого события.

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

<button id="myBtn" value="Демонстрация события click">
<script>
//в качестве обработчика события будем использовать безымянную функцию:
document.getElementById("myID").onclick = function {
  alert("Событие click");
}
</script>

Например, добавить к кнопке, имеющей событие , при наступлении которого выполняется указанная функция:

//Найти элемент на событие, которого Вы хотите подписаться
var myButton = document.getElementById("myButton");
//добавить к объекту свойство, имеющее имя on
//при наступлении события click выполняется функция myFunction
myButton.onclick = myFunction;
//функция myFunction
function myFunction() {
  //код функции
  //...
}

Если событие задаётся через атрибут, то браузер, читая код HTML, создаёт соответствующее свойство автоматически. Т.е. браузер работает с событиями только с помощью соответствующих свойств объекта (элемента).

Если Вы подпишитесь на событие различными способами, т.е. через атрибут и с помощью свойства, то браузер в этом случае будет использовать только вариант реализации события, выполненный с помощью свойства.
Подписываться на события лучше только с помощью соответствующих свойств объекта (элемента), использовать атрибуты для этих целей не рекомендуется.

10 – $()

Определенно, цель полностью заменить jQuery API выходит за рамки данного урока. Но часто в проектах функции или используются для короткой записи получения одного или нескольких элементов из DOM.

Модерн

var $ = function(el) {
   return document.querySelectorAll(el);
};
// Использование = $('.box');

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

Наследие

if ( !document.getElementsByClassName ) {
   document.getElementsByClassName = function(cl, tag) {
      var els, matches = [],
         i = 0, len,
         regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
     
      // Если не задано имен тегов,
      // мы будем получать все элементы из DOM    
      els = document.getElementsByTagName(tag || "*");
      if ( !els ) return false;
 
      for ( len = els.length; i < len; i++ ) {
         if ( els.className.match(regex) ) {
            matches.push( els);
         }
      }
      return matches; // массив элементов, которые имеют определённое имя класса
   };
}
  
// Очень простая реализация. Проверяем id, класс и имя тега.
var $ = function(el, tag) {
   var firstChar = el.charAt(0);
  
   if ( document.querySelectorAll ) return document.querySelectorAll(el);
  
   switch ( firstChar ) {
      case "#":
         return document.getElementById( el.slice(1) );
      case ".":
         return document.getElementsByClassName( el.slice(1), tag );
      default:
         return document.getElementsByTagName(el);
   }
};
 
// Использование
$('#container');
$('.box'); // Любые элементы с классом box
$('.box', 'div'); // Элементы div с классом box
$('p'); // Получаем все элементы p

К сожалению, метод обратной достаточно большой. В данном случае лучше использовать библиотеку. jQuery оптимизирован для работы с DOM! Пример выше будет работать, но он не поддерживает сложные селекторы CSSв старых браузерах.

Объект document. Поиск элементов

Последнее обновление: 1.11.2015

Для работы со структурой DOM в JavaScript предназначен объект document, который определен в глобальном объекте
window. Объект document предоставляет ряд свойств и методов для управления элементами страницы.

Поиск элементов

Для поиска элементов на странице применяются следующие методы:

• getElementById(value): выбирает элемент, у которого атрибут равен value

• getElementsByTagName(value): выбирает все элементы, у которых тег равен value

• getElementsByClassName(value): выбирает все элементы, которые имеют класс value

• querySelector(value): выбирает первый элемент, который соответствует css-селектору value

• querySelectorAll(value): выбирает все элементы, которые соответствуют css-селектору value

Например, найдем элемент по id:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div>
		<h3 id="header">Block Header</h3>
		<p>Text</p>
	</div>
<script>
var headerElement = document.getElementById("header");
document.write("Текст заголовка: " + headerElement.innerText);
</script>
</body>
</html>

С помощью вызова находим элемент, у которого id=»header». А с помощью свойства
innerText можно получить текст найденного элемента.

Поиск по определенному тегу:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div>
		<h3>Заголовок</h3>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var pElements = document.getElementsByTagName("p");

for (var i = 0; i < pElements.length; i++) {
	document.write("Текст параграфа: " + pElements.innerText + "<br/>");
}
</script>
</body>
</html>

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

Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:

var pElement = document.getElementsByTagName("p");
document.write("Текст параграфа: " + pElement.innerText);

Получение элемента по классу:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="article">
		<h3>Заголовок статьи</h3>
		<p class="text">Первый абзац</p>
		<p class="text">Второй абзац</p>
	</div>
<script>
var articleDiv = document.getElementsByClassName("article");
	console.log(articleDiv);
var textElems = document.getElementsByClassName("text");
for (var i = 0; i < textElems.length; i++) {
	console.log(textElems);
}
</script>
</body>
</html>

Выбор по селектору css:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="annotation">
		<p>Аннотация статьи</p>
	</div>
	<div class="text">
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var elem = document.querySelector(".annotation p");
document.write("Текст селектора: " + elem.innerText);
</script>
</body>
</html>

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

Аннотация статьи

Первый абзац

Второй абзац

Текст селектора: Аннотация статьи

Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll,
который возвращает массив найденных элементов:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="annotation">
		<p>Аннотация статьи</p>
	</div>
	<div class="text">
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var elems = document.querySelectorAll(".text p");

for (var i = 0; i < elems.length; i++) {
	document.write("Текст селектора " + i + ": " + elems.innerText + "<br/>");
}
</script>
</body>
</html>

Вывод браузера:

Аннотация статьи

Первый абзац

Второй абзац

Текст селектора 0: Первый абзац
Текст селектора 1: Второй абзац

НазадВперед

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>');

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

Параметр

Описание

selectors

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

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

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

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

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

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

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

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

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

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

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

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

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

Параметр

Описание

selectors

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

getElementsByClassName

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

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

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

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

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

Методы Range

Существует множество удобных методов для манипулирования диапазонами.

Установить начало диапазона:

• установить начальную границу в позицию в
• установить начальную границу прямо перед
• установить начальную границу прямо после

Установить конец диапазона (похожи на предыдущие методы):

• установить конечную границу в позицию в
• установить конечную границу прямо перед
• установить конечную границу прямо после

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

Другие:

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

Чтобы манипулировать содержимым в пределах диапазона:

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

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

Проверим описанные методы в действии:

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

Напоминания о праздниках

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

Параметр

Описание

selectors

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

Перемещение элементов

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

Если у вас есть этот HTML:

<div class="first">
  <h1>Title</h1>
</div><div class="second">
  <h2>Subtitle</h2>
</div>

и допустим нем необходимо  вставить после :

const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');
h1.insertAdjacentElement('afterend', h2);

он будет просто перемещен, а не скопирован:

<div class="first">
  <h1>Title</h1>
  <h2>Subtitle</h2>
</div><div class="second">
  
</div>

Методы интерфейса Document

Метод	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
adoptNode()	Метод позволяет принять узел из любого документа, частью которого он являлся на момент вызова, и записывает в свойство Node.ownerDocument ссылку на текущий документ, подготавливая его к добавлению в текущий документ.	Да	Да	Да	Да	9.0	Да
close()	Метод завершает запись в документ (закрывает поток открытый с помощью метода open() объекта Document)	Да	Да	Да	Да	Да	Да
createAttribute()	Метод создает новый атрибут с указанным именем (объект Attr) и возвращает его.	Да	Да	Да	Да	Да	Да
createCDATASection()	Создает узел CDATASection и возвращает его (только для XML документов).	Да	Да	Да	Да	Да	Да
createComment()	Позволяет создать новый узел комментария и возвратить его.	Да	Да	Да	Да	Да	Да
createDocumentFragment()	Позволяет создать новый пустой объект DocumentFragment, предназначенный для создания фрагмента документа, в который впоследствии допускается добавить новые элементы и узлы, а затем присоединить этот фрагмент к основному дереву DOM.	Да	Да	Да	Да	Да	Да
createElement()	Метод позволяет создать и вернуть новый элемент (пустой узел Element) с указанным именем тега.	Да	Да	Да	Да	Да	Да
createElementNS()	Метод позволяет создать и вернуть новый элемент (пустой узел Element) с указанным именем тега с указанным URI пространства имен.	Да	Да	Да	Да	Да	Да
createEvent()	Метод создает событие указанного типа.	Да	Да	Да	Да	9.0	Да
createNodeIterator()	Возвращает новый объект NodeIterator.	Да	Да	Да	Да	9.0	Да
createTextNode()	Метод позволяет создать и вернуть текстовый узел с указанным текстом.	Да	Да	Да	Да	Да	Да
getElementById()	Метод возвращает объект Element, представляющий из себя элемент, глобальный атрибут id которого соответствует указанной строке.	Да	Да	Да	Да	Да	Да
getElementsByClassName()	Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, которые соответствуют указанному имени классу, или классам.	Да	Да	Да	Да	Да	Да
getElementsByName()	Метод возвращает коллекцию всех элементов документа с указанным именем (значением атрибута name) в виде объекта NodeList.	Да	Да	Да	Да	Да	Да
getElementsByTagName()	Метод возвращает коллекцию всех элементов документа с указанным именем тега в виде объекта HTMLCollection.	Да	Да	Да	Да	Да	Да
getElementsByTagNameNS()	Метод возвращает коллекцию всех элементов документа с указанным именем тега в виде объекта NodeList, принадлежащих определенному пространству имен	Да	Да	Да	Да	Да	Да
hasFocus()	Метод возвращает логическое значение, которое указывает на то, имеет ли документ, или любой элемент внутри документа фокус.	Да	Да	Да	Да	Да	Да
importNode()	Метод создает новую копию указанного узла (объект Node) или фрагмента (объект DocumentFragment) из другого документа для возможности вставки в текущий документ.	Да	Да	Да	Да	9.0*	Да
open()	Метод позволяет открыть поток для записи документа (данные могут быть переданы с помощью методов write() или writeln() объекта Document).	Да	Да	Да	Да	Да	Да
querySelector()	Метод возвращает первый элемент в документе (объект Element), соответствующий указанному селектору, или группе селекторов.	Да	Да	Да	Да	8.0*	Да
querySelectorAll()	Метод возвращает список элементов в пределах документа (статичный (не живой) объект типа NodeList), соответствующих указанному селектору, или группе селекторов.	Да	Да	Да	Да	8.0*	Да
write()	Записывает в поток документа строку текста.	Да	Да	Да	Да	Да	Да
writeln()	Записывает в поток документа строку текста за которой следует символ новой строки.	Да	Да	Да	Да	Да	Да

Заключение