Привет! Поговорим о методах и свойствах js, связанных с родителями и потомками в DOM-дереве
Сначала немного определений: чем отличаются дочерние узлы и дочерние элементы?
📝Дочерние элементы - это прямые потомки элемента, а дочерние узлы - это потомки вместе со своими потомками и так далее
Итак, методы и свойства js, связанные с темой:
➡️ contains
- возвращает Boolean-значение, проверяет, является ли элемент дочерним узлом другого элемента:
item.contains(list)
- является ли item дочерним узлом list
➡️ closest
- возвращает элемент, либо null, ищет ближайший элемент, соответствующий селектору. Может вернуть сам элемент, либо ближайшего родителя, который соответствует селектору, либо null, если таковых нет:
btnBuy.closest('.card-item')
- так можно получить карточку товара - родителя данной кнопки, чтобы например, поменять стили карточки при нажатии на кнопку
➡️ element.parentNode и element.parentElement
- эти свойства возвращают родителя для element. Отличие только в том, что для тега html parentNode вернет document, а parentElement - null.
➡️ element.childNodes и element.children
- так же похожи, оба возвращают потомков element, но
element.childNotes
- вернет дочерние узлы, а
element.children
- дочерние элементы. Приставка Node как раз и означает узел
➡️ element.firstChild и element.lastChild
- позволяют получить первого и последнего потомков element.
#js #dom