Выбрать последний элемент на css?

• JavaScript
• +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

• 1 подписчик
• 2 часа назад
• 20 просмотров

Шпаргалка по часто используемым CSS селекторам

Шпаргалка по CSS селекторам. С подсказками, как выбирать HTML элементы по классу, имени, атрибутам и списку дочерних селекторов.

CSS селекторы нацеливаются и выбирают HTML элементы, которые вы хотите стилизовать. В частности, селекторы CSS позволяют одновременно выбирать несколько элементов. Они полезны, когда вы хотите применить одни и те же стили к нескольким элементам HTML, потому что вы не будете повторяться, писать одни и те же строки кода для разных элементов.

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

Простые CSS селекторы

Селекторы позволяют нацеливаться и выбирать определённые части HTML документа для стилизации.

Простые CSS селекторы напрямую выбирают один или несколько элементов:

• С помощью универсального селектора * .
• На основе имени/типа элемента.
• На основе значения класса элемента.
• На основе значения идентификатора элемента.

Изучив, как работают самые просты селекторы, вы сможете понять, как использовать более сложные. Простые CSS селекторы чаще всего используются.

Универсальный CSS селектор

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

*  
property: value; 
>

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

*  
padding: 0; 
margin: 0; 
>

CSS селектор типа

Селектор типа выбирает все HTML элементы указанного типа. Для его использования, укажите имя элемента. Например, если вы хотите применить стиль к каждому параграфу HTML-элемента, вы должны указать элемент p :

p  
property: value; 
>

Приведённый выше код сопоставит и выберет все элементы p в документе, и стилизует их.

CSS селектор класса

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

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

Классы можно использовать повторно, что делает их хорошим вариантом практики DRY-разработки. DRY — это принцип разработки, сокращение от ‘Don’t Repeat Yourself (Не повторяйся). Как следует из названия, цель состоит в том, чтобы по возможности избегать написания повторяющегося кода.

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

.my_class  
property: value; 
>

В приведённом выше коде элементы с классом my_class выбираются и оформляются соответствующим образом.

CSS селектор идентификатора

Селектор идентификатора выбирает HTML элемент на основе значения его атрибута id .

Имейте в виду, что идентификатор элемента должен быть уникальным в HTML документе, то есть должен быть только один HTML элемент с данным значением идентификатора. Вы не можете использовать одно и то же значение идентификатора для другого элемента, кроме этого.

Чтобы выбрать элемент с определённым идентификатором, используйте символ # , за которым следует имя идентификатора:

#my_id  
property: value; 
>

Приведённый выше код будет соответствовать только уникальному элементу со значением идентификатора my_id .

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

CSS селектор атрибутов

У многих HTML элементов есть атрибуты.

• Предоставляют дополнительную информацию об HTML элементах.
• Всегда указываются в начальном (или открывающемся теге).
• Обычно используются пары имя/значение, такие как имя=’значение’ .
• Значение в паре имя/значение должно быть заключено в кавычки.

Одним из самых популярных HTML атрибутов, с которым, вы возможно, сталкивались, является атрибут href , который добавляется к открывающему тегу и указывает URL-адрес, на который ссылается тег :

Значение href представляет собой URL https://www.freecodecamp.org/ , на которой перейдёт пользователь кликнув на текст ссылки The best place to learn to code for free!

Селектор атрибутов сопоставляет и выбирает HTML элементы на основе наличия значения атрибута. Существуют различные типы селекторов атрибутов. Ниже приведены некоторые из наиболее распространённых селекторов атрибутов.

Селектор атрибута [attribute]

Для использования CSS селектора атрибутов, используйте пару квадратных скобок [] для выбора нужного атрибута. Общий синтаксис для селекторов атрибутов следующий:

element[attribute]

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

a[attr]  
property: value; 
>

В приведённом выше примере выбираются элементы a с именем атрибута attr независимо от значения attr .

С учётом сказанного, вы можете быть более конкретным в своём стиле.

Селектор атрибута [attribute=»value»]

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

element[attribute="value"]

Итак, если вы хотите стилизовать элементы a с атрибутом attr , который имеет точное значение равное 1 , вы должны сделать следующее:

a[attr="1"]  
property: value; 
>

Селектор атрибута [attribute^=»value»]

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

element[attribute^="value"]

Например, если вы хотите выбрать и стилизовать любые элементы a , у которых есть атрибут attr со значением начинающимся с www , вы должны сделать следующее:

a[attr^="www"]  
property: value; 
>

Селектор атрибута [attribute$=»value»]

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

element[attribute$="value"]

Например, если вы хотите выбрать элементы a с именем атрибута attr со значением оканчивающимся на .com , вы должны сделать следующее:

a[attr$=".com"]  
property: value; 
>

Селектор атрибута [attribute*=»value»]

Вы также можете указать, что значение атрибута содержит определённую подстроку — этот селектор известен как CSS селектор атрибута содержащего подстроку и имеет следующий синтаксис:

element[attribute*="value"]

В этом случае строковое значение должно присутствовать в значении атрибута, за которым следует любое количество других символов — значение необязательно должно быть целым словом. Например, если вы хотите выбрать элементы a , у которых есть атрибут attr со значением, содержащим строку free , вы должны сделать следующее:

a[attr*="free"]  
property:value; 
>

Приведённый выше код выбирает элемента a с именем атрибута attr , когда в значении атрибута присутствует строка free — даже в виде подстроки (подстрока — это слово внутри другого).

Селектор атрибута [attribute~=»value»]

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

element[attribute~= "value"]

В этом случае строковое должно быть целым словом.

Например, если вы хотите выбрать элементы a , у которых есть имя атрибута attr со значением, содержащим слово free , вы можете сделать следующее:

a[attr~= "free"]  
property: value; 
>

Код не будет выделять элементы со значением атрибута freeCodeCamp или freediving , как это было в предыдущем примере, потому что free должно быть целым словом, а не подстрокой. Атрибут attr должен содержать слово free отделённое от других символов пробельными символами.

Группирование CSS селекторов

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

Например, вот так можно настроить таргетинг на несколько элементов, div , p и span , и применить к каждому из них одни и те же стили:

div, p, span  
property: value; 
>

Этот код находит в HTML документе все элементы div , p и span и присваивает им один и тот же стиль.

Комбинаторы CSS селекторов

Комбинаторы позволяют объединять два HTML элемента на основе отношений между ними и их расположением в HTML документе. По сути, вы можете комбинировать два простых селектора таким образом, чтобы объяснить взаимосвязь между этими CSS селекторами. Комбинаторы — это тип CSS селектора, который определяет и описывает взаимосвязь между двумя селекторами.

Существует четыре типа комбинаторов:

• Комбинатор потомков пробел .
• Прямой дочерний комбинатор > .
• Общий родственный комбинатор ~ .
• Соседний родственный комбинатор + .

Комбинатор потомков

Как следует из названия, комбинатор потомков выбирает только потомков указанного HTML элемента.

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

В качестве примера возьмём следующее:

DOCTYPE html> 
html lang="en"> 
head> 
meta charset="UTF-8"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 
link rel="stylesheet" href="main.css"> 
title>Documenttitle> 
head> 
body> 
div> 
h2>I am level 2 headingh2> 
p>I am a paragraph inside a divp> 
span>I am a spanspan> 
p>I am a paragraph inside a divp> 
div> 
p>I am a paragraph outside a divp> 
body> 
html>

В приведённом выше примере HTML документа div является родительским элементом, а h2 , span , и два p — дочерними элементами, поскольку они находятся внутри div . Существует также p вне div .

Если вы хотите стилизовать только те p , которые находятся внутри div , вот что вы должны сделать:

div p  
property: style; 
>

В приведённом выше примере стилизуются только два p с текстом I am a paragraph inside a div внутри блока div . Два других дочерних элемента и абзац вне div с текстом I am a paragraph outside a div не стилизуются.

Прямой дочерний комбинатор

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

В качестве примера возьмём следующий HTML документ:

DOCTYPE html> 
html lang="en"> 
head> 
meta charset="UTF-8"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 
link rel="stylesheet" href="main.css"> 
title>Documenttitle> 
head> 
body> 
div> 
a href="#">I am a linka> 
a href="#">I am a linka> 
p>a href="#">I am a link inside a paragrapha>p> 
div> 
body> 
html>

У нас есть div являющийся родительским элементом. Внутри родительского HTML элемента есть два элемента a являющиеся прямыми дочерними элементами элемента div .

Также есть ещё один элемент a внутри элемента p . Элемент p является дочерним элементом div , но элемент a внутри параграфа p не является прямым дочерним элементом div .

Итак, чтобы получить доступ только к элементам a , которые являются прямыми дочерними элементами div , вы должны сделать следующее:

div > a  
property: value; 
>

Приведённый выше код выбирает элементы a , непосредственно вложенные в div и являющиеся его непосредственными дочерними элементами.

Общий родственный комбинатор

Общий родственный комбинатор выбирает родственные элементы.

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

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

В качестве примера возьмём следующее:

DOCTYPE html> 
html lang="en"> 
head> 
meta charset="UTF-8"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 
link rel="stylesheet" href="main.css"> 
title>Documenttitle> 
head> 
body> 
div> 
p>I am paragraph inside a divp> 
div> 
p>I am a paragraph outside a divp> 
h3>I am a level three headingh3> 
p>I am a paragraph outside a divp> 
body> 
html>

Внутри элемента div есть вложенный элемент p . Этот конкретный элемент p является дочерним элементом div . Также есть два параграфа с текстом I am a paragraph outside a div и элемент h3 . Все эти три элемента ( p , h3 и p ) являются родственными элементами элемента div (находятся с ним на одном уровне вложенности).

Чтобы выбрать элемента p являющиеся родственными элементу div , вы должны сделать следующее:

div ~ p  
property: value; 
>

Приведённый выше код стилизует оба элемента p , идущие после div . Он стилизует даже элемент p , который не следует непосредственно за элементом div , например, элемент p следующий за элементом h3 . Это происходит потому, что он всё ещё идёт после div .

Соседний родственный комбинатор

Соседний родственный комбинатор является более конкретным, чем общий родственный комбинатор. Этот селектор соответствует только непосредственным родственным элементам. Непосредственные родственные элементы — это HTML элементы идущие сразу за первым элементом.

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

Вернёмся к примеру из предыдущего раздела:

DOCTYPE html> 
html lang="en"> 
head> 
meta charset="UTF-8"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 
link rel="stylesheet" href="main.css"> 
title>Documenttitle> 
head> 
body> 
div> 
p>I am paragraph inside a divp> 
div> 
p>I am a paragraph outside a divp> 
h3>I am a level three headingh3> 
p>I am a paragraph outside a divp> 
body> 
html>

Хотя HTML элемент p следующий за элементом h3 , является родственным элементом элемента div , он не является непосредственно родственным элементом, как элемент p стоящий пред h3 .

Таким образом, чтобы настроить таргетинг только на HTML элемент p идущий сразу за div , вы должны сделать следующее:

div + p  
property: value; 
>

Селекторы псевдоклассов

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

• На элемент наведён указатель мыши :hover .
• Элемент является первым элементом своего типа :first-of-type .
• Ссылка была ранее посещена из этого браузера :visited .
• Ссылка ранее не посещалась в этом браузере :link .
• Чекбокс/радио кнопка отмечена/установлена :checked

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

Общий синтаксис выглядит примерно так:

element:имя-псевдокласса  
property: value; 
>

Селекторы псевдоклассов для ссылок

Существуют CSS селекторы, основанные на информации о состоянии ссылки.

Селектор :link применяет стиль, когда элемент ранее не посещался:

a:link  
property: value; 
>

Селектор :visited применяется, когда элемент ранее посещался в текущем браузере:

a:visited  
property: value; 
>

Селектор :hover применяется, когда указатель мыши находится над элементом:

a:hover  
property: value; 
>

Селектор :focus применяется, когда пользователь при помощи кнопки Tab переместил фокус на элемент:

a:focus  
property:value; 
>

Селектор :active применяется, когда элемент выбран после нажатия и удержания кнопки мыши:

a:active  
property: value; 
>

Селекторы псевдоклассов для input

Селектор :focus , который вы видели ранее для ссылок, также используется для input :

input:focus  
property: value; 
>

Селектор :required выбирает поля обязательные к заполнению, input с атрибутом required .

input:required  
property: value; 
>

Селектор :checked выбирает отмеченные поля типа checkbox или radio :

input:checked  
property:value; 
>

Селектор :disabled выбирает неактивные элементы. У неактивных элементов установлен атрибут disabled . Многие браузеры по умолчанию оформляют отключённые элементы input блеклым серым цветом:

input:disabled  
property:value; 
>

Селекторы псевдокласса для позиции

Селектор первого дочернего элемента :first-child выбирает первый элемент, который будет первым дочерним элементом внутри указанного родительского контейнера. Например, вот так можно выбрать элемент a , если он является первым дочерним элементом в родительском контейнере:

a:first-child  
property: value; 
>

Селектор последнего дочернего элемента :last-child , выбирает элемент, который будет последним дочерним элементом внутри родительского контейнера. Например, вот так можно выбрать элемент a , который является последним дочерним элементом в родительском контейнере:

a:last-child  
property: value; 
>

Селектор первого типа, :first-of-type , выбирает элементы, которые являются первыми элементами этого конкретного типа в родительском контейнере. Например, вот так выбрать первый p внутри div :

div p:first-of-type  
property: value; 
>

Селектор последнего типа, :last-of-type , выбирает элементы, которые являются последними элементами этого конкретного типа в родительском контейнере. Например, вот так выбрать последний p внутри div

div p:last-of-type  
property: value; 
>

Селектор :nht-child() полезен, когда вы хотите выбрать элементы на основе выражения, например чётные или нечётные элемента.

Значения ключевых слов псевдокласса :nht-child()

odd — представляет элементы, чьё числовое положение в ряду соседних элементов является нечётным: 1, 3, 5 и т.д.

even — представляет элементы, чьё числовое положение в ряду соседних элементов является чётным: 2, 4, 6 и т.д.

Функциональная нотация псевдокласса :nht-child()

— Представляет элементы, чьё числовое положение в ряду соседних элементов соответствует шаблону An+B для каждого положительного целого числа и нулевого значения n , где:

A — целочисленный размер шага, B — целочисленное смещение, n — все неотрицательные целые числа, начиная с 0.

Его можно прочитать как An+B элемент списка. A и B целые числа.

Примеры селектора псевдокласса :nht-child()

tr:nth-child(odd) или tr:nth-child(2n+1) — Нечётные строки HTML-таблицы: 1, 3, 5, и т.д.

tr:nth-child(even) или tr:nth-child(2n) — Чётные троки HTML-таблицы: 2, 4, 6, и т.д.

:nth-child(7) — Представляет седьмой элемент.

:nth-child(5n) — Представляет элементы 5 [=5×1], 10 [=5×2], 15 [=5×3], и т.д. В результате формулы первым возвращается 0 [=5×0], что приводит к несоответствию, поскольку элементы индексируются с 1, тогда как n начинает с 0. Поначалу это может показаться странным, но имеет больше смысла, когда часто B больше 0, как в следующем примере.

:nth-child(n+7) — Представляет седьмой и все последующие элементы: 7 [=0+7], 8 [=1+7], 9 [=2+7], и т.д.

:nth-child(3n+4) — Представляет элементы: 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], и т. д.

:nth-child(-n+3) — Представляет первые три элемента: [=-0+3, -1+3, -2+3]

p:nth-child(n) — Представляет каждый элемент

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

p:nth-child(1) или p:nth-child(0n+1) — Представляет каждый

являющийся первым элементом в группе. Это тоже самое, что и селектор :first-child (имеет туже специфику).

p:nth-child(n+8):nth-child(-n+15) — Представляет элемент

с восьмого по пятнадцатый в группе элементов.

CSS Селекторы псевдоэлементов

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

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

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

Общий синтаксис выглядит так:

element::pseudo-element-selector  
property:value; 
>

Обязательно используйте символ :: вместо : при использовании селекторов псевдоэлементов — это поможет отличить псевдоклассы от псевдоэлементов.

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

Псевдоэлемент ::before

В CSS ::before создаёт первый дочерний псевдоэлемент выбранного элемента. Часто он используется для декоративных целей, добавления содержимого к элементу с помощью свойства content . Он встроен по умолчанию. Вы можете использовать его для вставки содержимого перед элементом:

p::before  
property: value; 
>

Псевдоэлемент ::after

В CSS ::after создаёт последний дочерний псевдоэлемент выбранного элемента. Часто он используется для декоративных целей, добавления содержимого к элементу с помощью свойства content . Он встроен по умолчанию. Вы можете использовать его для вставки содержимого после элемента:

p::after  
property: value; 
>

Псевдоэлемент ::first-letter

CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только в том случае, если ему не предшествует другой контент (например, изображение или встроенные таблицы).

Вы можете использовать псевдоэлемент ::first-letter для выбора первой буквы абзаца, что полезно, когда вы хотите оформить первую букву определённым образом:

p::first-letter  
property: value; 
>

Псевдоэлемент ::first-line

CSS псевдоэлемент ::first-line применяет стили к первой строке блочного элемента.

Эффекты ::first-line ограничены длинной и одержимым первой строки текста в элементе. Длинна первой строки зависит от множества факторов, включая ширину документа и размер шрифта текста. ::first-line не действует, если первый дочерний элемент, который будет первой часть первой строки, является встроенным элементом уровня блока, например встроенной таблицей.

Вы можете использовать псевдоэлемент ::first-line для выбора первой строки абзаца:

p::first-line  
property: value; 
>

Псевдоэлемент ::selection

CSS псевдоэлемент ::selection применяет стили к той части документа, которая была выделена пользователем.

Вы можете использовать псевдоэлемент ::selection , чтобы задать цвет текста и фона выделенные в параграфе:

p::selection  
color: lightblue; 
background-color: navy; 
>

Заключение

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

Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Введение

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента ( CSS или JavaScript ) браузеру приходиться « обойти » весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class . Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

Селекторы атрибутов

($=) – атрибут оканчивается определенным значением

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

div[id$=“_myDiv”] < // CSS правило >

Атрибут id$ находится внутри скобок элемента div . Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

  
Какой-то текст
 

Взаимодействие с DOM с помощью консоли

Средство «Консоль» — это отличный способ взаимодействия с веб-страницей в браузере. Консоль похожа на версию среды скрипта средства проверки.

Чтение из DOM

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

1. Откройте консоль DevTools. Для этого на веб-странице можно нажать клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS).
2. Введите или вставьте следующий код в консоль и нажмите клавишу ВВОД:

document.querySelector('header') 

В консоли наведите указатель мыши на результирующий HTML-элемент или нажмите клавиши SHIFT+TAB. На отображаемой веб-странице DevTools выделяет заголовок:

Управление DOM

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

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Консоль откроется в средствах разработки рядом с текущей веб-страницей.
2. Вставьте следующий код в консоль:

document.querySelector('header').style.border = '2em solid green' 

Вокруг заголовка появится зеленая граница:

Получение прямой ссылки на элемент

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

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

1. В devTools щелкните средство «Проверка «, а затем на отображаемой веб-странице наведите указатель мыши на элемент:
2. Щелкните элемент на странице, и DevTools перейдет к инструменту Элементы .
3. . Щелкните меню рядом с элементом в дереве DOM:
4. Щелкните правой кнопкой мыши элемент в дереве DOM и выберите Копировать>путь JS. header > div:nth-child(1) > div.nav-bar-item.is-hidden-tablet > div > button > span») «` Here’s the result after you add text content: «`javascript document.querySelector(«#headerAreaHolder > header > div:nth-child(1) > div.nav-bar-item.is-hidden-tablet > div > button > span»).textContent = «My Playground» «` —>
5. В консоли вставьте скопированный путь к JavaScript, но пока не нажимайте клавишу ВВОД .
6. Измените текст ссылки My Playground на . Для этого добавьте .textContent = «My Playground» в путь JavaScript, который вы вставили ранее:

Используйте любые манипуляции с DOM JavaScript, которые вы хотите использовать в консоли. Чтобы сделать его более удобным, консоль поставляется с несколькими вспомогательными служебными методами.

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

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

Возможности функций $

В консоли есть специальные $ возможности, и вы можете запомнить это из jQuery.

• $_ сохраняет результат последней команды. Таким образом, если ввести 2+2 и нажать клавишу ВВОД, а затем ввести $_ , консоль отобразит . 4
• $0 to $4 — это стек последних проверяемых элементов. $0 всегда является новейшим. Таким образом, в предыдущем примере просто выберите элемент в средстве «Проверка » и введите , $0.textContent = «My Playground» чтобы получить тот же эффект.
• $x() позволяет выбирать элементы DOM с помощью XPATH.
• $() и $$() являются более короткими версиями для document.querySelector() и document.querySelectorAll() .

Пример. Извлечение всех ссылок со страницы в виде сортируемой таблицы

1. Введите следующий код, который извлекает все ссылки на веб-странице и отображает ссылки в виде сортируемой таблицы для копирования и вставки (например, в Excel):

console.table($$('a'),['href','text']); 

$$(‘a’) является сокращением от document.querySelectorAll(‘a’) . Однако предположим, что вы не хотите отображать всю информацию, но хотите получить ее как данные, а затем выбрать только некоторые из данных. Ярлык $$(‘a’) помогает в этом: он выбирает ссылки привязки и все свойства для каждой привязки. Но проблема заключается в том, что вам нужны только ссылки привязки и связанный текст, а не все свойства ссылок привязки. Чтобы решить эту проблему, $$ ярлык имеет интересную дополнительную функцию: вместо возврата чистого NodeList , как document.querySelectorAll() , $$ ярлык предоставляет все Array методы, включая map() .
map() Используйте метод объекта , Array чтобы свести сведения к нужному:

$$('a').map(a => < return >) 

Приведенный выше код возвращает объект из Array всех ссылок в виде объектов со свойствами url и text . Вы еще не сделали. несколько ссылок являются внутренними ссылками на веб-страницу или имеют пустой текст.
Используйте метод , filter чтобы избавиться от внутренних ссылок:

$$('a').map(a => < return >).filter(a => < return a.text !== '' && !a.url.match('learn.microsoft.com') >) 

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

$$('a[href^="https://"]').forEach( a => a.style.border = '1px solid green' ) 

Вместо написания сложного Кода JavaScript для фильтрации результатов используйте возможности селекторов CSS.

Создание таблицы

Чтобы создать таблицу src со сведениями и alt для всех изображений на веб-странице, которые не являются встроенными изображениями, выполните следующие действия:

1. Откройте консоль.
2. Вставьте следующий код в консоль и нажмите клавишу ВВОД:

console.table($$('img:not([src^=data])'), ['src','alt']) 

Пример. Получение всех заголовков страниц и URL-адресов привязки

Готовы к еще более сложному примеру? Веб-страницы HTML, созданные с помощью тегов Markdown, как в текущей статье, имеют автоматические значения идентификаторов для каждого заголовка, что позволяет вам напрямую ссылаться на этот раздел веб-страницы. Например, # New features заголовок h1 в исходном файле Markdown становится

в HTML-файле.

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

1. Откройте консоль.
2. Скопируйте и вставьте следующий код:

let out = ''; $$('#main [id]').filter( elm => ).forEach(elm => < out += elm.innerText + "\n" + document.location.href + '#' + elm.id + "\n"; >); console.log(out); 

Результатом будет текст, содержащий содержимое для каждого заголовка, за которым следует полный URL-адрес, указывающий на него.

Очистка с помощью очистки и копирования

При разработке в консоли все может быть запутано. Может быть трудно выбрать результаты для копирования и вставки. Следующие два служебных метода помогают:

• copy() копирует все, что вы отдадите ему в буфер обмена. Метод copy() особенно полезен при его сочетании с $_ , который копирует последний результат.
• clear() очищает консоль.

Чтение и мониторинг событий

Два других интересных служебных метода Console имеют дело с обработкой событий:

• getEventListeners(node) выводит список всех прослушивателей событий узла.
• monitorEvents(node, events) отслеживает и регистрирует события, происходящие на узле.

Чтобы получить список всех прослушивателей событий, назначенных первой форме на веб-странице, выполните следующие действия:

1. В средствах разработки откройте консоль.
2. Введите или вставьте следующий код в консоль:

getEventListeners($('form')); 

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

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

1. В средствах разработки откройте консоль.
2. Вставьте следующий код в консоль:

monitorEvents(window, ['resize', 'scroll']); monitorEvents($0, 'keyup'); 

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

unmonitorEvents(window, ['resize', 'scroll']); unmonitorEvents($0, 'key');