Как выбрать дочерний элемент js
Навигация по дереву DOM
На этом занятии рассмотрим способы навигации по DOM дереву и выбора нужного элемента в HTML-документе. Предположим, что у нас имеется вот такая страница:
Обратите внимание, что мы прописали тег в конце документа. Это сделано для того, чтобы браузер успел загрузить весь документ и создать полное DOM-дерево. Если мы его подключим, например, в разделе head, то переменная body будет равна null (что означает, что объект не существует). Вот это следует учитывать при работе с DOM: нужно быть уверенным, что браузер полностью загрузил документ, прежде чем работать с ним через JavaScript.
Дочерние узлы и потомки
Например, вот в этом фрагменте дерева head является дочерним узлом html, но title уже им не является, так как вложен в head. А вот потомки – это все вложенные элементы, значит, для html потомками будут и head и title. Вот это и гласят данные определения.
Для каждого узла дерева список его дочерних элементов можно получить через коллекцию childNodes, например, так:
Коллекция childNodes представляет собой псевдомассив, то есть, это итерируемый объект, но в нем отсутствуют методы массива. Из предыдущих занятий мы знаем, что для перебора элементов псевдомассива лучше использовать цикл for of:
Некоторые начинающим программисты применяют цикл for in для этой коллекции, что не стоит делать, по крайней мере, по двум причинам: это будет работать медленнее; будут доступны дополнительные свойства childNodes, которые обычно не нужны.
Если же мы хотим оперировать коллекцией childNodes как массивом, то ее можно преобразовать в массив:
и, затем, использовать любые методы массивов, например:
У каждого узла DOM-дерева имеются свойства firstChild и lastChild. Они обеспечивают доступ к первому и последнему дочернему элементу в списке childNodes. Например, так:
По сути, это то же самое, что и такой выбор:
но записано в более краткой форме.
Если нам нужно узнать, есть ли у текущего элемента дочерние узлы, то используется метод hasChildNodes():
Возвращает true, если есть и false, если нет.
Обратите внимание, что элементы коллекции childNodes доступны только для чтения. Менять их, используя синтаксис:
нельзя. Для удаления, добавления и изменения узлов дерева используются свои методы, о которых речь пойдет позже.
Наконец, если нам нужен только список дочерних тегов, то вместо коллекции childNodes используется коллекция children:
Теперь, мы видим только список тегов.
Соседние элементы, родитель
Теперь поговорим о переходах между соседними элементами. И введем такое понятие:
Соседи – это узлы, у которых один и тот же родитель.
Например, вот в такой базовой структуре документа:
Например (структура HTML-документа должна быть как выше):
В консоле увидим объект body и head.
Наконец, если нам нужно получить объект родителя, то используется свойство parentNode:
Итак, относительно любого узла DOM-дерева можно осуществлять следующие переходы:
Если же нам нужны только узлы-элементы (как правило, это теги HTML-документа), то используется похожий набор свойств:
Здесь есть только одно ключевое отличие этих свойств (а, точнее, одного свойства parentElement), от ранее рассмотренных. В целом и parentNode и parentElement возвращают всегда один и тот же родительский элемент, кроме корневого элемента:
Объект document не считается элементом HTML-страницы, поэтому ссылка parentElement для корня DOM-дерева возвращает null.
Они используются также как и описанные выше другие свойства узлов DOM-дерева. Например, если у нас имеется вот такая таблица:
То можно обратиться к ячейке со строкой два и вывести ее содержимое в консоль:
Здесь свойство innerHTML содержит HTML-текст выбранной ячейки таблицы. О нем речь пойдет позже в других занятиях.
Видео по теме
JavaScipt (DOM) #1: объектная модель документа DOM и BOM
JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById
JavaScipt (DOM) #4: свойства DOM-узлов: nodeName, innerHTML, outerHTML, data, textContent, hidden
JavaScipt (DOM) #5: работа с нестандартными свойствами DOM-элементов: getAttribute, setAttribute, dataset
JavaScipt (DOM) #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML
JavaScipt (DOM) #9: HTML-документ: размеры (clientWidth, innerWidth), положение (pageYOffset, scrollBy)
JavaScipt (DOM) #11: обработчики событий: onclick, addEventListener, removeEventListener, event
JavaScipt (DOM) #12: погружение и всплытие событий: stopPropagation, stopImmediatePropagation, eventPhase
JavaScipt (DOM) #14: события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
JavaScipt (DOM) #15: события клавиатуры keydown, keyup, событие скроллинга scroll
JavaScipt (DOM) #18: события change, input, cut, copy, paste, submit элементов input и select
JavaScipt (DOM) #20: события load, error; атрибуты async, defer тега script
JavaScipt (DOM) #21: пример предзагрузки изображений с помощью javascript
JavaScipt (DOM) #22: пример создания начала игры арканоид
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
Основы JavaScript: управление DOM элементами (часть 3)
Nov 12, 2019 · 4 min read
Навигация по DOM элементам
Обход DOM или, проще говоря, навигация по DOM элементам — это работа со свойствами родительских, дочерних и соседних DOM элементов с помощью JavaScript.
В качестве примера мы будем использовать следующий код:
В браузере файл будет выглядеть следующим образом:
Корневые узлы
П р оверить содержимое каждого элемента можно, набрав в консоли:
Родительские узлы
Как упоминалось ранее, узлы в DOM делятся на родительские, дочерние и соседние в зависимости от их связи с другими узлами. Родитель конкретного узла — это узел, который находится на уровень выше в иерархии DOM.
Мы можем проверить родителя p элемента с помощью parentNode свойства. Так как мы присвоили p переменной, необходимо просто ввести:
Можно даже подняться на два уровня выше:
Дочерние узлы
Дочерние элементы узла — это узлы, которые находятся на уровень ниже. Если узлы находятся ниже еще на один уровень вложенности, они называются предками.
По этой причине, если мы попытаемся изменить цвет фона первого дочернего узла, возникнет ошибка, так как первый дочерний элемент — это текст.
ul.children вернет только три li элемента.
Так выглядит обновленная страница:
Теперь все дочерние элементы изменили цвет фона:
Свойство childNodes полезно, когда необходимо получить доступ к информации.
В этом коде мы получаем доступ к последнему дочернему элементу li из четырех элементов ul в body и применяем стили.
Используя свойства дочерних и родительских элементов, можно вернуть любой узел из DOM!
Соседние элементы
Получим средний элемент списка ul :
Также воспользуемся свойствами соседнего элемента для получения доступа к следующему и предыдущему элементам (избегая текстовых пробелов).
Изменения будут выглядеть следующим образом:
В следующей финальной части мы рассмотрим, как изменять DOM, управлять узлами, удалять узлы из DOM. Также мы подробнее коснемся изменения классов, атрибутов и стилей.
Шпаргалка по JS-методам для работы с DOM
Основные источники
Введение
JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.
Я постараюсь дать вам исчерпывающее представление об этих методах, а также покажу парочку полезных приемов, которые сделают вашу жизнь веб-разработчика немного легче.
Размышляя над подачей материала, я пришел к выводу, что оптимальным будет следование спецификациям с промежуточными и заключительными выводами, сопряженными с небольшими лирическими отступлениями.
Сильно погружаться в теорию мы не будем. Вместо этого, мы сосредоточимся на практической составляющей.
Для того, чтобы получить максимальную пользу от данной шпаргалки, пишите код вместе со мной и внимательно следите за тем, что происходит в консоли инструментов разработчика и на странице.
Вот как будет выглядеть наша начальная разметка:
У нас есть список ( ul ) с тремя элементами ( li ). Список и каждый элемент имеют идентификатор ( id ) и CSS-класс ( class ). id и class — это атрибуты элемента. Существует множество других атрибутов: одни из них являются глобальными, т.е. могут добавляться к любому элементу, другие — локальными, т.е. могут добавляться только к определенным элементам.
Мы часто будем выводить данные в консоль, поэтому создадим такую «утилиту»:
Миксин NonElementParentNode
Данный миксин предназначен для обработки (браузером) родительских узлов, которые не являются элементами.
В чем разница между узлами (nodes) и элементами (elements)? Если кратко, то «узлы» — это более общее понятие, чем «элементы». Узел может быть представлен элементом, текстом, комментарием и т.д. Элемент — это узел, представленный разметкой (HTML-тегами (открывающим и закрывающим) или, соответственно, одним тегом).
Небольшая оговорка: разумеется, мы могли бы создать список и элементы программным способом.
Для создания элементов используется метод createElement(tag) объекта Document :
Одним из основных способов получения элемента (точнее, ссылки на элемент) является метод getElementById(id) объекта Document :
Почему идентификаторы должны быть уникальными в пределах приложения (страницы)? Потому что элемент с id становится значением одноименного свойства глобального объекта window :
Миксин ParentNode
Данный миксин предназначен для обработки родительских элементов (предков), т.е. элементов, содержащих одного и более потомка (дочерних элементов).
Такая структура называется коллекцией HTML и представляет собой массивоподобный объект (псевдомассив). Существует еще одна похожая структура — список узлов (NodeList ).
Для дальнейших манипуляций нам потребуется периодически создавать новые элементы, поэтому создадим еще одну утилиту:
Наша утилита принимает 4 аргумента: идентификатор, текст, название тега и CSS-класс. 2 аргумента (тег и класс) имеют значения по умолчанию. Функция возвращает готовый к работе элемент. Впоследствии, мы реализуем более универсальный вариант данной утилиты.
Одной из интересных особенностей HTMLCollection является то, что она является «живой», т.е. элементы, возвращаемые по ссылке, и их количество обновляются автоматически. Однако, эту особенность нельзя использовать, например, для автоматического добавления обработчиков событий.
Создадим универсальную утилиту для получения элементов:
Наша утилита принимает 3 аргумента: CSS-селектор, родительский элемент и индикатор количества элементов (один или все). 2 аргумента (предок и индикатор) имеют значения по умолчанию. Функция возвращает либо один, либо все элементы (в виде обычного массива), совпадающие с селектором, в зависимости от значения индикатора:
Миксин NonDocumentTypeChildNode
Миксин ChildNode
Данный миксин предназначен для обработки дочерних элементов, т.е. элементов, являющихся потомками других элементов.
Интерфейс Node
Данный интерфейс предназначен для обработки узлов.
Интерфейс Document
Фрагменты позволяют избежать создания лишних элементов. Они часто используются при работе с разметкой, скрытой от пользователя с помощью тега template (метод cloneNode() возвращает DocumentFragment ).
createTextNode(data) — создает текст
createComment(data) — создает комментарий
importNode(existingNode, deep) — создает новый узел на основе существующего
Интерфейсы NodeIterator и TreeWalker
Интерфейсы NodeIterator и TreeWalker предназначены для обхода (traverse) деревьев узлов. Я не сталкивался с примерами их практического использования, поэтому ограничусь парочкой примеров:
Интерфейс Element
Данный интерфейс предназначен для обработки элементов.
Работа с classList
Работа с атрибутами
insertAdjacentElement(where, newElement) — универсальный метод для вставки новых элементов перед/в начало/в конец/после текущего элемента. Аргумент where определяет место вставки. Возможные значения:
insertAdjacentText(where, data) — универсальный метод для вставки текста
Text — конструктор для создания текста
Comment — конструктор для создания комментария
Объект Document
Свойства объекта location :
reload() — перезагружает текущую локацию
replace() — заменяет текущую локацию на новую
title — заголовок документа
head — метаданные документа
body — тело документа
images — псевдомассив ( HTMLCollection ), содержащий все изображения, имеющиеся в документе
Следующие методы и свойство считаются устаревшими:
Миксин InnerHTML
Геттер/сеттер innerHTML позволяет извлекать/записывать разметку в элемент. Для подготовки разметки удобно пользоваться шаблонными литералами:
Расширения интерфейса Element
Вот несколько полезных ссылок, с которых можно начать изучение этих замечательных инструментов:
Иногда требуется создать элемент на основе шаблонной строки. Как это можно сделать? Вот соответствующая утилита:
Существует более экзотический способ создания элемента на основе шаблонной строки. Он предполагает использование конструктора DOMParser() :
Еще более экзотический, но при этом самый короткий способ предполагает использование расширения для объекта Range — метода createContextualFragment() :
В завершение, как и обещал, универсальная утилита для создания элементов:
Заключение
Разумеется, шпаргалка — это всего лишь карманный справочник, памятка для быстрого восстановления забытого материала, предполагающая наличие определенного багажа знаний.
VDS от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Навигация по элементам в jQuery
В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.
find() – выбор потомков
Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.
children() – выбор дочерних элементов
children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).
Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:
Если необходимо выбрать не все, а только определённые, то можно использовать селектор.
Например, выберем не все элементы, а только
closest() – выбор ближайшего предка
Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).
Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.
Например, выбрать
- в качестве ближайшего предка для элементов текущего набора:
next() – выбор следующего элемента
При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.
Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:
prev() – выбор предыдущего элемента
siblings() – выбор сиблингов
При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.
parent() – получение родителя
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.
Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :
Например, получим предков являющимися
offsetParent() – получение ближайшего позиционированного предка
Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.
Например, найдём offsetParent для элемента с классом active :
В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.
Этот метод не принимает никаких аргументов.
Основы JavaScript: Изучаем элементы DOM! (Часть 2)
Дата публикации: 2019-03-25
От автора: в этой статье мы узнаем все о том, как обходить элементы DOM в JavaScript, а также вносить в них изменения. Мы продолжаем тему, начатую в статье Изучаем DOM! (Часть 1). Итак, начнем!
Обход DOM
Когда мы проходим DOM, мы по сути перемещаемся по нему. Мы работаем с родительскими дочерними и одноуровневыми свойствами, чтобы применить JavaScript к элементам DOM. Мы будем использовать новый пример, который приведен ниже:
Наш файл выглядит в браузере так:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Корневые узлы
Объект document является корнем каждого узла в DOM. Следующий уровень — это объект window, который включает в себя такие элементы, как вкладки браузера, панели инструментов, командные строки и оповещения. Мы будем работать с DOM и, следовательно, с объектом document, который состоит из того, что находится внутри window.
По умолчанию каждый документ содержит элементы html, head и body. Проверьте содержимое каждого из них, запустив в консоли следующее: