Element javascript parent: Node: parentElement property — Web APIs

Leave a Comment / Разное / By /

Найти родительский элемент с CSS

CSS ‘:

has' добавляет пользовательскую логику для поиска элементов на основе других селекторов (вместо собственного селектора).

Опубликовано в

·

Чтение: 3 мин.

·

16 сентября 2022 г. 0017 двигатель CSS , но иногда трудно сделать определенные вещи, используя только CSS, даже просто изменить некоторые цвета. Например, если я попрошу вас найти родительский элемент из дочернего элемента в CSS, обычно вы застрянете.

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

JavaScript

Я разработчик JavaScript, поэтому в прошлом, когда возникают эти проблемы, я просто пишу несколько строк кода JS, например:

 Document. getElementById('root')

Иногда более сложная версия, но более или менее я могу найти элемент, даже если он находится далеко-далеко в одной из ветвей DOM. Здесь нет ничего нового, мы занимаемся этим почти два десятилетия назад. Но, честно говоря, JavaScript тяжеловат; если мне не нужно этого делать, я стараюсь не делать этого в JavaScript. Да, я разработчик JavaScript, но сейчас я использую CSS в качестве своего первого инструмента для решения проблем пользовательского интерфейса просто потому, что он дешевле.

CSS

CSS 9Верьте или нет, 0018 добавляет новые функции каждый день. Причина, по которой мы чувствуем, что он быстро меняется, заключается в том, что никто не отслеживает спецификацию CSS, не говоря уже обо всех этих совместимости браузеров. Одна из особенностей, которая, кажется, открывает нам дверь в отношении родительского узла, называется :has . Можете посмотреть видео, если еще не знаете. Я подожду, пока ты не вернешься.

Вместо прямого поиска элемента мы находим его, спрашивая, имеет ли он другой селектор или содержит его. Давайте рассмотрим селектор:

 a img {}

Приведенный выше селектор запрашивает img внутри a . Это просто, но именно поэтому мы не можем найти родителя, потому что нас не интересует img , ну вроде того, что мы действительно хотим сделать, это:

 a:has(img) {}

Ааа, если a содержит img , то это a , который мы хотим найти. Вот и все? Вы могли бы сказать. Да, это действительно делает невозможное возможным.

См. спецификации для :has , https://developer.mozilla.org/en-US/docs/Web/CSS/:has

body:has()

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

 body:has(. Modal) {} // если модальное внутри 
 body:has(+ .Modal) {} // если модальное родственное

Одна строка кода? Давайте попробуем сделать это с помощью JavaScript, удачи. Более того, если вы можете интегрировать свою версию JavaScript с менее чем пятью строками кода в свою структуру внешнего интерфейса. Ты победил!

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

CSS :has добавляет пользовательскую логику для поиска элементов на основе других селекторов (вместо собственного селектора). Это сделало бы невыполнимую задачу поиска родительского узла возможной с этого момента.

Обход DOM с помощью JavaScript

Опубликовано

Хороший разработчик JavaScript должен знать, как перемещаться по модели DOM — это действие по выбору элемента из другого элемента.

Но зачем нам учиться перемещаться по DOM? Разве document.querySelector недостаточно для большинства наших нужд?

В этой статье я покажу вам, почему траверс лучше, чем document.querySelector и как пройти как профессионал. Так что расслабьтесь, расслабьтесь и наслаждайтесь статьей!

Прежде чем мы двинемся дальше, обратите внимание, что эта статья представляет собой пример урока из курса «Изучение JavaScript» — курса, который я создал, чтобы помочь вам выучить JavaScript раз и навсегда (даже если вы пытались и потерпели неудачу ранее). Вы можете узнать больше о Learn JavaScript по этой ссылке.

Почему мы пересекаем

Допустим, вы хотите пойти к соседу. Какой самый быстрый и эффективный способ добраться туда?

  1. Переехать из своего дома в их дом (поскольку вы уже знаете их адрес)
  2. Найдите их адрес на картах Google, а затем следуйте указаниям, которые дает вам Google.

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

Если вы ищете их адрес в Google, вы делаете эквивалент document.querySelector для поиска элементов.

Можете ли вы угадать, какой метод более эффективен?

 <дел>
  
😎

  
🎉

Вы, наверное, знаете ответ — всегда проще перейти от одного элемента к другому (по сравнению с полным поиском). Вот почему мы пересекаем DOM.

Вы можете перемещаться в трех направлениях:

  1. Вниз
  2. Боком
  3. Вверх

(Примечание: есть и вторая причина — она более надежна — но это тема для обсуждения в другой день.)

Движение вниз

Есть два способа перемещения вниз:

  1. querySelector или querySelectorAll
  2. дети

querySelector или querySelectorAll

Чтобы перейти вниз от определенного элемента, вы можете использовать element. querySelector или element.querySelectorAll .

Если мы поместим element.querySelector в аналогию с домом, мы будем искать определенную комнату в вашем доме. Это быстрее, чем искать ту же комнату из космоса (документ).

 <дел>
   
Название компонента
 
 
 константный компонент = document.querySelector('.component')
const title = component.querySelector('.component__title')
console.log(название) //  
 ...

детей

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

 <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
    • 
  
  • Ссылка 5
    • 
 
     постоянный список = document. querySelector('.list')
const listItems = список.дети
console.log(listItems)

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

    Коллекция HTML похожа на NodeList (который возвращает querySelectorAll ). Есть тонкие различия, которые на самом деле не имеют значения для контекста этой статьи.

    Важно то, что HTML-коллекция представляет собой массивоподобный объект. Если вы хотите перебрать его с помощью Array.prototype.forEach , вам нужно сначала преобразовать его в массив с Array.from .

     константный массив = Array.from(HTMLCollection)
array.forEach (эль => {
  /* делай что хочешь */
})

    Выбор конкретного потомка

    Вы можете выбрать n-й элемент в списке как из NodeLists (результат querySelectorAll ), так и из коллекций HTML (результат дочерних элементов ). Для этого вы используете индекс элемента, точно так же, как вы выбираете определенный элемент из массива.

     <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
    • 
  
  • Ссылка 5
    • 
 
     
     const listItems = document.querySelectorAll('li')
константа firstItem = listItems[0]
const secondItem = listItems[1]
const третийItem = listItems[2]
константа fourItem = listItems[3]
constпятыйItem = listItems[4]
console.log(первыйэлемент)
console.log(второй элемент)
console.log(третий элемент)
console.log(четвертый элемент)
console.log(пятый элемент)

    Выберите конкретный дочерний элемент с [index]

    Попробуйте приведенный выше код с коллекцией HTML. Вы получите тот же результат.

    Движение вверх

    Есть два способа перемещения вверх:

    1. родительский элемент
    2. ближайший

    родительский элемент

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

    В следующем HTML-коде .list является родительским элементом всех

  • . Каждый
  • является родительским элементом соответствующих <а> .

     <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
    • 
  
  • Ссылка 5
    • 
 
     const firstListItem = document.querySelector('li')
константный список = firstListItem.parentElement
console.log(список)
// 
      ...

    ближайший

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

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

     const NearestAncestor = Element.
     
     
     closest(селектор)

    Как вы можете подозревать, селектор — это тот же селектор , который вы передаете querySelector и querySelectorAll .

    В следующем HTML вы можете легко выбрать .list из с помощью Element.closest :

     <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
    • 
  
  • Ссылка 5
    • 
 
     const firstLink = document.querySelector('a')
список const = firstLink.closest('.list')
console.log(список)
// 
       ...

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

     const firstLink = document.querySelector('a')
const firstLinkThroughClosest = firstLink.
      closest('a')
console.log(firstLinkThroughClosest)
// Ссылка 1

    ближайший довольно новый. Он не работает в IE Edge 14 и ниже. В Опере мини тоже не работает. Если вам нужна поддержка старых браузеров, вы можете использовать полифилл.

    Боковой ход

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

    1. следующийЭлементСиблинг
    2. предыдущийЭлементСиблинг
    3. Объединение parentElement , дочерних элементов и index .

    следующий элементSibling

    Вы можете выбрать следующий элемент с помощью nextElementSibling .

     const nextElem = Node.nextElementSibling 
     <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
     
    • 
  
  • Ссылка 5
    • 
 
     const firstListItem = document. querySelector('li')
const secondListItem = firstListItem.nextElementSibling
console.log (второй элемент списка)
// 
  • Ссылка 2
    •

    предыдущийElementSibling

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

     <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
    • 
  
  • Ссылка 5
    • 
 
     const secondListItem = document.querySelectorAll('li')[1]
const firstListItem = secondListItem.previousElementSibling
console.log(первыйListItem)
// 
  • Ссылка 1
    •

    Объединение parentElement, дочерних элементов и индекса

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

     <ул>
  
  • Ссылка 1
    • 
  
  • Ссылка 2
    • 
  
  • Ссылка 3
    • 
  
  • Ссылка 4
    • 
  
  • Ссылка 5
    •

    Допустим, у вас уже есть первый предмет:

     const firstItem = document. querySelector('li')

    Чтобы выбрать четвертый элемент, вы можете использовать firstItem.parentElement для получения списка, затем list.children для получения коллекции HTML. Получив коллекцию HTML, вы можете найти четвертый элемент, используя индекс 3. (Помните, индекс начинается с нуля!).

     const firstItem = document.querySelector('li')
список констант = firstItem.parentElement
const allItems = список.дети
константа fourItem = allItems[3]
console.log(четвертый элемент)
// 
  •  
    Ссылка 4
    •

    Собираем все вместе за один шаг:

     const firstItem = document.querySelector('li')
константа fourItem = firstITem.parentElement.children[3]
console.log(четвертый элемент)
// 
  • Ссылка 4
    •

    Упражнение

    Попрактикуйтесь в обходе DOM с помощью методов, описанных в этом уроке. С приведенным ниже HTML выполните следующие задачи:

    1. Выберите .characters с document. querySelector
    2. Выберите .humans из .characters
    3. Выберите всех людей с помощью querySelectorAll , начиная с .humans
    4. Выбрать всех хоббитов с детьми
    5. Выберите Веселого (хоббита)
    6. Выберите .врагов из Саурона
    7. Выберите .characters div от Nazgûl
    8. Выберите Элронда из Глорфинделя
    9. Выберите Леголаса из Глорфинделя
    10. Выберите Арвен из Глорфинделя
     <дел>
  <ул>
    
  • Фродо Бэггинс
    • 
    
  • Сэмуайз "Сэм" Гэмджи
    • 
    
  • Мериадок "Веселый" Брендибак
    • 
    
  • Перегрин "Пиппин" Тук
    • 
    
  • Бильбо Бэггинс
    • 
  
  <ул>
    
  • Гэндальф
    • 
    
  • Саруман
    • 
    
  • Арагорн
    • 
    
  • Боромир
    • 
    
  • Фарамир
    • 
  
  <ул>
    
  • Леголас
    • 
    
  • Глорфиндель
    • 
    
  • Элронд
    • 
    
  • Арвен Эвенстар
    • 
  
  <ул>
    
  • Саурон
    • 
    
  • Назгул
    •

    Подведение итогов

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

    .
    1. Движение вниз
      1. element.querySelector
      2. element.querySelectorAll
      3. элемент.дети
    2. Движение вверх
      1. элемент.родительский элемент
      2. элемент.ближайший
    3. Боковой ход
      1. element.nextElementSibling
      2. element.previousElementSibling
      3. Объединить parentElement , дочерние и index

    Я надеюсь, что этот урок поможет прояснить, почему мы просматриваем DOM и как это можно сделать. Если этот урок помог вам, вам может понравиться Learn JavaScript, где вы можете шаг за шагом поделиться другими уроками JavaScript — базовыми, средними и даже продвинутыми.

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

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

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