Внутри элемента html можно определить

Выбор элементов внутри других элементов на CSS.

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

Предположим, у нас есть элемент table.

 
Элемент 1
 
Элемент 2
 
Элемент 3
 
 

В нем есть вложенные элементы tr и td.

Давайте создадим еще одну аналогичную таблицу, но с >

 
Элемент 1
 
Элемент 2
 
Элемент 3
 
 

Предположим, что у нас стоит задача, сделать все элементы td внутри table1 синим цветом, а все элементы td внутри table2 красным цветом.

Причем, у элемента td нет никакого класса и идентификатора, по которому можно было бы сделать выборку.

Давайте подумаем как можно решить эту задачу.

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

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

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

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

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

Дмитрий Ченгаев 💎
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2022-03-24

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Источник

Свойства узлов: тип, тег и содержимое

Теперь давайте более внимательно взглянем на DOM-узлы.

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

Классы DOM-узлов

Каждый DOM-узел принадлежит соответствующему встроенному классу.

Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.

На рисунке ниже изображены основные классы:

Существуют следующие классы:

• EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
• Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
• Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
• CharacterData – «абстрактный» класс. Вот, кем он наследуется:
  • Text – класс, соответствующий тексту внутри элементов. Например, Hello в

    Hello

    .

  • Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
  • HTMLInputElement – класс для тега ,
  • HTMLBodyElement – класс для тега ,
  • HTMLAnchorElement – класс для тега ,
  • …и т.д.

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

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

  Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.

  Он получает свойства и методы из (в порядке наследования):

  • HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
  • HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
  • Element – предоставляет типовые методы элемента,
  • Node – предоставляет общие свойства DOM-узлов,
  • EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
  • …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .

  Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:

  Источник