Родительский элемент js: Node.parentElement — Интерфейсы веб API

Leave a Comment / Js / By /

Element — JavaScript — Дока

  1. Кратко
  2. Как пишется
  3. Как понять
    1. 💡 Свойства, связанные с HTML-атрибутами
    2. 💡 Свойства и методы, связанные с DOM
    3. 💡 Свойства с информацией о содержимом
  4. На практике
    1. Николай Лопин советует

Кратко

Скопировано

Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

Из DOM можно получить элемент и изменить его. Браузер заметит изменения и отобразит их на странице.

Как пишется

Скопировано

Например, можно поменять выравнивание у элемента h2:

// получаем элемент из DOMconst element = document.getElementsByTagName('h2')[0]// после выполнения этого кода h2 будет выравнивать текст по центруelement. align = 'center'// меняем цвет шрифта на красныйelement.style.color = 'red'
          // получаем элемент из DOM
const element = document.getElementsByTagName('h2')[0]
// после выполнения этого кода h2 будет выравнивать текст по центру
element.align = 'center'
// меняем цвет шрифта на красный
element.style.color = 'red'

Как понять

Скопировано

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

  • свойства, связанные с HTML-атрибутами: id, классы, стили и так далее;
  • свойства и методы связанные с обходом DOM: получение дочерних элементов, родителя, соседей;
  • информация о содержимом;
  • специфические свойства элемента.

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

💡 Свойства, связанные с HTML-атрибутами

Скопировано

Читать и записывать значения HTML-атрибутов можно при помощи свойств элемента. Название обычно совпадает с названием атрибута:

  • id — получить идентификатор элемента.
  • className — список классов в HTML-атрибуте class.
const element = document.getElementsByTagName('div')[0]// напечатать список классов в консольconsole.log(element.className)// установить свой классelement.className = 'hacked'
          const element = document.getElementsByTagName('div')[0]
// напечатать список классов в консоль
console.log(element.className)
// установить свой класс
element.className = 'hacked'
  • style — добавить стили. Стили добавляются так же с помощью свойств. Свойства именуются по аналогии с CSS-свойствами:
const element = document.getElementsByTagName('div')[0]// CSS-свойство background-colorelement.style.backgroundColor = 'beige'// CSS-свойство colorelement.style.color = 'gray'// CSS-свойство margin-topelement.style.marginTop = '20px'
          const element = document.
  getElementsByTagName('div')[0]
// CSS-свойство background-color
element.style.backgroundColor = 'beige'
// CSS-свойство color
element.style.color = 'gray'
// CSS-свойство margin-top
element.style.marginTop = '20px'

💡 Свойства и методы, связанные с DOM

Скопировано

  • children — список дочерних элементов;
  • parentElement — получить родительский элемент;
  • nextElementSibling и previousElementSibling — получить следующий/предыдущий узел-сосед:
Открыть демо в новой вкладке
  • getElementsByClassName() — поиск среди дочерних элементов по названию класса;
  • getElementsByTagName() — поиск среди дочерних элементов по названию тега;
  • querySelector() — поиск первого дочернего элемента, подходящего под CSS-селектор;
  • querySelectorAll() — поиск всех дочерних элементов подходящих под CSS-селектор;

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

💡 Свойства с информацией о содержимом

Скопировано

  • innerHTML — это свойство возвращает HTML-код всего, что вложено в текущий элемент. При записи в это свойство, предыдущее содержимое будет затёрто. Страница отобразит новое содержимое:
const divElement = document.getElementsByTagName('div')[0]divElement.innerHTML = '<p>Добавлен из кода</p>'// после выполнения этого кода, на странице отобразится параграф с указанным текстом
          const divElement = document.getElementsByTagName('div')[0]
divElement.innerHTML = '<p>Добавлен из кода</p>'
// после выполнения этого кода, на странице отобразится параграф с указанным текстом
  • outerHTML — это свойство возвращает HTML-код текущего элемента и всего, что в него вложено. При записи в это свойство, предыдущее содержимое будет затёрто.
  • textContent — свойство, возвращает текст всех вложенных узлов без HTML-тегов.

Почувствуй разницу на демо:

Открыть демо в новой вкладке

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Если нужно добавить текст в элемент, то всегда используйте свойство textContent. Другие свойства обрабатывают HTML, это может привести к дырам в безопасности.

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

  • добавить класс — метод add().
  • удалить класс — метод remove().
const element = document.getElementsByTagName('div')[0]element.classList.add('hello')element.classList.remove('bye')
          const element = document. getElementsByTagName('div')[0]
element.classList.add('hello')
element.classList.remove('bye')

🛠 В HTML часто используют data-атрибуты. Они используются, когда нужно передать данные через HTML. Например, когда сервер собирает стартовый HTML, он может поместить значения в data-атрибуты. Фронтендер затем может использовать их, вместо того, чтобы отправлять запрос на сервер. Название таких атрибутов начинаются с префикса data-. Для доступа к ним из JavaScript используется свойство

dataset:

const element = document.getElementsByTagName('div')[0]// получить значение атрибута data-columns тега divconsole.log(element.dataset.columns)// изменить значениеelement.dataset.columns = 99
          const element = document.getElementsByTagName('div')[0]
// получить значение атрибута data-columns тега div
console.log(element.dataset.columns)
// изменить значение
element.dataset.columns = 99

🛠 У элементов очень много свойств. Если нужно что-то получить из элемента, то скорее всего уже есть свойство, которое хранит эти данные.

🛠 Если нужно удалить элемент и все вложенные в него, воспользуйтесь методом remove():

const element = document.querySelector('#some-element')element.remove()
          const element = document.querySelector('#some-element')
element.remove()

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

.cookie

ctrl + alt + ←

→

.addEventListener()

ctrl + alt + →

Фрагменты в React. Не знаете, как решить проблему… | by Daria Sidorova | NOP::Nuances of Programming

При работе с React лучше использовать многоразовые компоненты с помощью таких инструментов, как Bit, чтобы избежать необходимости переписывать их каждый раз. К тому же, приятно использовать компоненты, организованные в визуальной галерее, не так ли?

Попробуйте визуализировать несколько компонентов React подобным образом:

class ParentC extends React.Component {
render() {
return (
<ChildC />
<ChildC />
)
}
}class ChildC extends React.Component {
render() {
return (
<h2>
Child Component
</h2>
)
}
}

или создать подобный список узлов:

class ChildComponent extends React.Component {
render() {
return (
<h2>Hello Child Component</h2>
<h2>Hello Child Component</h2>
)
}
}

При использовании VS Code с расширениями поддержки JSX, появится предупреждение: “Родительские выражения JSX должны иметь один родительский элемент”.

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

class ParentC extends React.Component {
render() {
return (
<div>
<ChildComponent />
<ChildComponent />
</div>
)
}
}class ChildComponent extends React. Component {
render() {
return (
<div>
<h2>Hello Child Component</h2>
<h2>Hello Child Component</h2>
</div>
)
}
}

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

Нам нужно визуализировать данные пользователей в табличной форме с помощью HTML-элемента table. Нужно визуализировать следующий код в React:

<table>
<tr>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>
</tr>
<tr>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>
</tr>
<tr>
<td>Row Ekemezie</td>
<td>Software Dev</td>
<td>? :)</td>
</tr>
</table>

Создадим компоненты для визуализации каждого аспекта элемента table. HeaderComponent отобразит заголовок таблицы, BodyComponent — тело таблицы. TableComponent визуализирует каркас таблицы с HeaderComponent и BodyComponent таким образом:

class TableComponent extends React.Component {
render() {
return (
<table>
<tr>
<HeaderComponent />
</tr>
<tr>
<BodyComponent />
</tr>
</table>
)
}
}

HeaderComponent должен выглядеть так:

class HeaderComponent extends React.Component {
render() {
return (
<th>Name</th>
<th>Occupation</th>
<th>Age</th>            
)
}
}

А BodyComponent выглядит вот так:

class BodyComponent extends React.Component {
render() {
return (
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>
)
}
}

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

Затем выполняем подобные действия, чтобы устранить предупреждение:

class HeaderComponent extends React.Component {
render() {
return (
<div>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>                        
</div>
)
}
}class BodyComponent extends React.Component {
render() {
return (
<div>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>            
</div>
)
}
}

Разметка вложена в тег div. Теперь на выходе компонент Table будет выглядеть так:

<table>
<tr>
<div>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>
</div>
</tr>
<tr>
<div>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>
</div>
</tr>
</table>

Выше приведен неправильный вывод элемента table. Элемент div не должен быть отображен. Компоненты React предназначены для возврата элементов, но они должны быть заключены в родительский тег, несколько элементов не могут быть возвращены. Однако добавление дополнительного узла иногда приводит к неправильному форматированию html-элемента output, как показано выше.

Как решить эту проблему? Каким образом можно возвратить заключенные элементы JSX, не влияя на визуализированный вывод в DOM?

Фрагменты React способны решить эту проблему!

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

Используя <React.Fragment>...</React.Fragment>, можно добавить родительский тег к элементам JSX без добавления дополнительного узла к DOM. React.Fragment не выводит HTMLElement.

Приступим к решению первой проблемы:

class ParentC extends React.Component {
render() {
return (
<ChildC />
<ChildC />
)
}
}class ChildC extends React. Component {
render() {
return (
<h2>
Child Component
</h2>
)
}
}

Теперь выполним вложение:

return (
<ChildC />
<ChildC />
)

в React.Fragment. Получаем такой результат:

class ParentC extends React.Component {
render() {
return (
<React.Fragment>
<ChildC />
<ChildC />
</React.Fragment>
)
}
}

Перейдем ко второму примеру:

class ParentC extends React.Component {
render() {
return (
<div>
<ChildComponent />
<ChildComponent />
</div>
)
}
}class ChildComponent extends React.Component {
render() {
return (
<div>
<h2>Hello Child Component</h2>
<h2>Hello Child Component</h2>
</div>
)
}
}

Удаляем теги div и добавляем React.Fragment вместо них:

class ParentC extends React. Component {
render() {
return (
<React.Fragment>
<ChildComponent />
<ChildComponent />
</React.Fragment>
)
}
}class ChildComponent extends React.Component {
render() {
return (
<React.Fragment>
<h2>Hello Child Component</h2>
<h2>Hello Child Component</h2>
</React.Fragment>
)
}
}

Переходим к третьему примеру и заменяем дополнительные теги div в BodyComponent и HeaderComponent на React.Fragment:

class HeaderComponent extends React.Component {
render() {
return (
<div>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>                        
</div>
)
}
}class BodyComponent extends React.Component {
render() {
return (
<div>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>            
</div>
)
}
}|
|
|
vclass HeaderComponent extends React. Component {
render() {
return (
<React.Fragment>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>                        
</React.Fragment>
)
}
}class BodyComponent extends React.Component {
render() {
return (
<React.Fragment>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>            
</React.Fragment>
)
}
}

Таблица будет отображена следующим образом:

<table>
<tr>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>
</tr>
<tr>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>
</tr>
</table>

Как мы и хотели, без лишних тегов div!!!

Если вам кажется, что многократное написание React.Fragment занимает слишком много времени, то можно использовать сокращенный синтаксис. Он выглядит таким образом: <>...</>. Теперь компоненты BodyComponent и HeaderComponent выглядят так:

class HeaderComponent extends React.Component {
render() {
return (
<React.Fragment>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>                        
</React.Fragment>
)
}
}class BodyComponent extends React.Component {
render() {
return (
<React.Fragment>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>            
</React.Fragment>
)
}
}

Можно записать и таким образом:

class HeaderComponent extends React.Component {
render() {
return (
<>
<th>Name</th>
<th>Occupation</th>
<th>Age</th>                        
</>
)
}
}class BodyComponent extends React. Component {
render() {
return (
<>
<td>Chidume Nnamdi</td>
<td>Software Dev</td>
<td>27</td>            
</>
)
}
}

Мы рассмотрели проблему невозможности возврата нескольких элементов и способ ее решения с помощью React.Fragment, а также научились использовать сокращенный синтаксис React.Fragment.

Благодаря React.Fragment можно насладиться преимуществом возврата нескольких элементов без необходимости добавлять дополнительные теги или теги div, которые окружают элементы и загромождают DOM.

Перевод статьи Chidume Nnamdi: Understanding Fragments in React

javascript — Что такое this.parentElement?

спросил

Изменено 3 месяца назад

Просмотрено 21к раз

 pg. myfunc = функция () {
    переменная i = 1, j = 2;
    это.выбрано = 1;
    xx.newObject = this.parentElement;
...

Что такое xx.newObject = this.parentElement; делаешь?

  • javascript

Это то же самое, что и this.parentNode : он дает вам узел, содержащий этот как дочерний узел. это будет pg , предположительно какой-то элемент; this.parentNode будет элементом, который его содержит, или объектом document , если pg является корневым элементом.

parentElement — нестандартное расширение IE. Поскольку IE также поддерживает стандартное свойство parentNode , parentElement никогда не следует использовать.

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

myfunc , на узле элемента.

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

 

  <диапазон>

В этом случае, если этот соответствует дочернему элементу span, parentElement будет соответствовать родительскому элементу div.

Тем не менее, вы всегда должны использовать parentNode вместо parentElement , поскольку parentElement является проприетарным и (я полагаю) работает только с IE. Согласно MSDN:

К этому свойству не применим общедоступный стандарт.

Это невозможно узнать без контекста. Мы не знаем, что такое xx, и мы не знаем наверняка, что такое «этот» объект. parentElement МОЖЕТ быть свойством pg, но опять же эта функция может вызываться по-другому, например, если где-то она назначена как функция onclick:

someElement.onclick = pg.myfunc;

В этом случае это будет свойство некоторого элемента.

Как уже говорили другие, если «это» является элементом DOM, вы должны использовать parentNode, а не parentElement, поскольку последний нестандартен.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Стилизовать родительский элемент в зависимости от количества дочерних элементов с помощью CSS :has() — Bram.

us

В CSS можно стилизовать элементы в зависимости от количества их братьев и сестер, используя селектор nth-child .

Но что, если вы хотите стилизовать родительский элемент в зависимости от количества дочерних элементов? Именно здесь в игру вступает селектор CSS :has() .

~

# Код

Если вы пришли просто за кодом, вот он. Вы также можете увидеть его в действии в демо ниже.

 /* Максимум 3 (3 или менее, исключая 0) детей */
ul: has(> :nth-child(  -n+3  ):last-child) {
контур: 1px сплошной красный;
}

/* Максимум 3 (3 или менее, включая 0) дочерних элементов */
ul:not(:has(>
 
 :nth-child(  3  ))) {
контур: 1px сплошной красный;
}

/* Ровно 5 детей */
ul: has(> :nth-child(  5  ):last-child) {
контур: 1px сплошной синий;
}

/* Не менее 10 (10 и более) детей */
ul:has(> :nth-child(  10  )) {
контур: 1px сплошной зеленый;
}

/* От 7 до 9 детей  (включительно)  */
ul:has(> :nth-child(  7  )): has(> :nth-child(  -n+9  ):last-child) {
контур: 1px сплошной желтый;
}

Если вы хотите знать, как это работает, продолжайте читать 🙂

~

# Селекторы

Шаблон каждого построенного здесь селектора таков:

 parent:has(>  count-condition ) {
…
}
  • С помощью parent:has() мы можем выбрать родительский элемент, который соответствует определенному условию для своих дочерних элементов.
  • Передавая > в :has() , мы нацеливаемся на родительских прямых дочерних элементов.
  • условие подсчета — это то, что нам нужно придумать для каждого типа выбора, который мы хотим сделать. Как и в случае с количественными запросами, мы будем использовать :nth-child() для этого.
Не более
x дочерних элементов

Используя :nth-child с минусом -n , можно выбрать первые x дочерних элементов. Если один из них также является самым последним дочерним элементом, вы можете определить, есть ли у родителя до x дочерних элементов

 /* Не более 3 (3 или менее, исключая 0) дочерних элементов */
ul: has(> :nth-child(  -n+3  ):last-child) {
контур: 1px сплошной красный;
}

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

 /* Максимум 3 (3 или менее, включая 0) дочерних элементов */
ul:not(:has(> :nth-child(  3  ))) {
контур: 1px сплошной красный;
}
Ровно
x детей

Чтобы выбрать элемент x из набора, вы можете использовать :nth-child без каких-либо н индикация. Если этот дочерний элемент также является последним дочерним элементом, вы знаете, что в родительском элементе ровно x дочерних элементов

 /* Ровно 5 дочерних элементов */
ul: has(> :nth-child(  5  ):last-child) {
контур: 1px сплошной синий;
}
Не менее
x дочерних элементов

Чтобы выбрать родителя с не менее чем x дочерних элементов, достаточно иметь возможность выбрать в нем дочерний элемент размером x , чтобы определить это. Здесь нет необходимости в :last-child .

 /* Не менее 10 (10 и более) детей */
ul: has (> : nth-child (  10  )) {
контур: 1px сплошной зеленый;
}
Между
x и y детей

Чтобы сделать промежуточный выбор, вы можете объединить два условия :has() вместе. Первый выбирает все элементы, которые имеют x или более дочерних элементов, тогда как второй отсекает диапазон, разрешая только элементы, которые имеют не более y дочерних элементов. Будут рассчитаны только элементы, соответствующие обоим условиям:

 /* От 7 до 9 детей  (включительно)  */
ul:has(> :nth-child(  7  )): has(> :nth-child(  -n+9  ):last-child) {
контур: 1px сплошной желтый;
}

~

# Демонстрация

См. родительские элементы Pen Styling на основе количества дочерних элементов с помощью CSS :has() от Bramus (@bramus) на CodePen.

~

# Поддержка браузера

Эти селекторы поддерживаются всеми браузерами, имеющими :has() поддержка. На момент написания это не включает Firefox.

Использование экспериментальной поддержки :has() в Firefox также не помогает. Его реализация все еще является экспериментальной, так как пока поддерживает не все типы выделения. Относительный анализ селекторов (например, a:has(> b) ) — одна из тех функций, которые еще не поддерживаются. Отслеживание ошибки: #1774588

~

не стесняйтесь ретвитить его объявление:

Стиль родительского элемента в зависимости от количества его дочерних элементов с использованием CSS `:has()`

🔗 https://t.co/Kn0JjafCR4

🏷 #css #селекторы pic.twitter.com/ZMtm4IUD0P

— Bram.us (@bramusblog) 17 ноября 2022 г.

~

🔥 Нравится то, что вы видите? Хотите оставаться в курсе? Вот как:

  • Подпишитесь на @bramus в Твиттере
  • Подпишитесь на @bramus на Mastodon
  • Подпишитесь на @bramusblog в Твиттере
  • Подпишитесь на bram.us, используя RSS
Автор: Брамус! Опубликовано в Исходное содержаниеМетки: CSS, селекторы

Брамус — веб-разработчик из Бельгии, работающий инженером по связям с разработчиками Chrome в Google.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *