Быстрый поиск элементов DOM


Содержание

Нужен совет новичку. Поиск элемента в DOM

Необходим скрипт, который позволит найти на странице кнопку/ссылку и нажать ее.

Javascript

Оба они работают, но как-то странно. Если запустить сразу после загрузки страницы, получаю ответ «»VM1492:2 Uncaught TypeError: Cannot read property ‘getElementsByTagName’ of null или во втором случае VM1526:2 Uncaught TypeError: Cannot read property ‘click’ of undefined.

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

P.S. Необходимые элементы находятся довольно глубоко в странице. Но страница константная, поэтому подходит вариант спарсить все теги «a» и выбрать необходимый, elems[1].click()

Добавлено через 3 часа 42 минуты
Up.

Javascript
17.10.2020, 13:15

Поиск элемента в DOM
Как найти «Добыча» ? Ссылка у объекта постоянно меняется. Если бы можно было так искать, то и.

Написать скрипт, рекурсивно обходящий дерево DOM страницы dom.html, начиная от корня DOM
Написать скрипт на языке JavaScript, рекурсивно обходящий дерево DOM страницы dom.html, начиная от.

Совет новичку
Посоветуйте хорошие книги/видеоуроки для изучения JavaScript’а с нуля, так чтобы действительно.

Дельный совет новичку
Добрый день. Мне необходимо за несколько месяцев выучить JS до уровня JUNIOR. Азы программирования.

Нужен совет новичку
Привет Всем! Вопрос по азам. Работаю на ubuntu. Установил pycharm, django, сервер работает когда.

17.10.2020, 16:16 2

нормально они работают
браузер прочитывает код файла построчно и последовательно
чтобы что-то найти в DOM’e, надо сначала этот самый DOM иметь
браузер ещё не увидел ни одной ссылки что-то , а вы уже требуете от него вернуть коллекцию всех ссылок в документе document.getElementsByTagName(‘a’) и кликнуть по ссылке с индексом [1]

Браузер вам честно отвечает — «я пока вообще ни одной ссылки в документе ещё не встретил», коллекция ссылок поэтому пустая и кликнуть по конкретному элементу пустоты я не могу»
вам надо дождаться, когда окно полностью загрузится и только потом требовать от браузера что-то искать в документе, загруженном в окно

изучите событие window.onload

17.10.2020, 16:45 [ТС] 3
18.10.2020, 02:43 4

illustrated man, какие-то сказки рассказываете

сделайте страницу с одной единственной ссылкой link
пропишите на ней в начале её скриптовой блок с кодом

в окне вы должны будете увидеть стартовую страницу Яндекса:
а) без каких-либо ошибок исполнения
и
б) вне зависимости от того — в каком именно месте вашей страницы эта ссылка находится и что именно ещё на странице у вас имеется

все эти ваши «консольные извращения» — не более чем мазохизм

Javascript
18.10.2020, 10:22 5
18.10.2020, 13:44 [ТС] 6

j2FunOnly, kalabuni, Да, я вроде нашел причину проблемы, нужная мне часть сайта лежит в

К сожалению не заметил этого сразу Как я могу обратиться к тому что находится внутри этого фрейма?

Добавлено через 11 минут
Я так понял данные внутри #document скрыты от моих скриптов даже после полной загрузки страницы

18.10.2020, 17:51 7

Решение

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

в свою собственную страницу вы можете внедрить скрипт, который может программно делать с этой вашей страницей всё, что угодно — кликать по любым кнопкам/ссылкам, вставлять, удалять или изменять любые фрагменты текста/кода
а вот хоть что-либо делать с чужой страницей нельзя (от слова совсем)

что ж вас всех так тянет попортить чужое?
делайте своё и изгаляйтесь над своим, как хотите

Быстрый поиск элементов DOM


Как правило, в реальных фронтенд-задачах нужно манипулировать наборами элементов (или одним), находящимися где-то глубоко в ДОМе. Причём зачастую эти элементы разбросаны по его разным частям. Например, мы можем отметить список файлов на удаление и выполнить это действие. С точки зрения изменения DOM Tree эта задача сводится к выборке всех элементов, которые представляют файлы (с точки зрения визуализации), и их последующему удалению.

Специализированные поисковые методы

В такой ситуации ручной проход по дереву окажется крайне утомительным занятием. DOM предлагает сразу несколько способов решения этой задачи. Самый простой вариант поиска — это поиск по идентификатору:

Так как id в соответствии со спецификацией обязан быть уникальным на странице, то и метод getElementById всегда возвращает один элемент. С другой стороны, по случайности, в html может оказаться несколько тегов с одним id . В такой ситуации браузер может вернуть всё, что угодно.

Если нужна обработка сразу нескольких элементов, то тут лучше подойдёт поиск по классу:

Как видите, этот метод позволяет искать не только в целом документе, но и среди потомков любого элемента.

14 подсказок для отладки JavaScript, о которых Вы могли не знать

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

Мы составили список из 14 подсказок для отладки, о которых Вы могли не знать, но которые могут помочь Вам отладить JavaScript код.

Большинство из этих подсказок для Chrome и Firefox, хотя, большинство из них работает и в средствах разработки для других браузеров.

1. ‘debugger;’

После console.log, ‘debugger;‘ мой любимый быстрый и «грязный» инструмент для отладки. Как только Вы добавляете его в свой код, Chrome автоматически останавливает выполнение кода в этой точке. Вы можете даже обернуть его в условие, чтобы он срабатывал только тогда, когда Вам это необходимо.

2. Отображение объектов в виде таблиц

Иногда у Вас есть сложный набор объектов, которые Вы хотите просмотреть. Вы можете использовать console.log для их отображения, а потом пролистывать огромный список, или использовать console.table. Так намного легче понять, с чем Вы имеете дело.

3. Попробуйте посмотреть на разных разрешениях

Было бы потрясающе, если бы на Вашем столе было любое мобильное устройство, однако в реальном мире это невозможно. Как изменить размер окна просмотра? Chrome предоставляет Вам все необходимое. Перейдите в инструменты разработчика, а затем нажмите кнопку «Режим переключения устройства». Посмотрите, как ваши медиа-выражения оживают!

4. Быстрый поиск DOM-элементов

Выберите DOM-элемент на панели элементов, а затем обращайтесь к нему в консоли. Инструменты разработчика в Chrome запоминают последние пять элементов: последний выбранный элемент $0, предпоследний выбранный элемент $1, и т.д.

Если Вы выбирали следующие элементы в порядке ‘item-4’, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’, то Вы можете получить доступ к DOM-элементам, как показано в консоли:

5. Замер времени выполнения кода с помощью console.time() и console.timeEnd()

Может быть очень полезно узнать, за какое время выполняется фрагмент кода, особенно при отладке медленных циклов. Вы можете установить несколько именованных таймеров. Посмотрим пример:

Этот код выдаст следующий результат:

6. Получение стек-трейса для функции

Вероятно Вы знаете, что в JavaScript-фреймворках очень много кода.

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

Поскольку JavaScript не является сильно структурированным языком, иногда бывает полезно получить информацию о том, что и когда произошло. В этот момент на сцену выходит console.trace.

Представьте, что Вы хотите увидеть весь стек вызовов для функции funcZ в экземпляре car на 33 строке.

Теперь мы видим, что func1 вызывает func2, которая вызывает func4. Func4 создает экземпляр Car, а затем вызывает функцию car.funcX, и т.д.

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

7. Форматирование минифицированного кода

Иногда Вы можете столкнуться с проблемой прямо на продакшене, а ваших сурс-мапов нет на сервере. Ничего страшного. Chrome может отформатировать Ваши JavaScript-файлы, приведя их в более читаемый формат. Конечно, код будет не так информативен, как исходный код, но, по крайней мере, Вы можете понять что в нем происходит. Нажмите кнопку <> «Pretty Print«, расположенную под просмотрщиком кода в инспекторе.

8. Быстрая отладка функции

Предположим, Вы хотите добавить точку останова для функции.

Есть два самых распространенных способа это сделать:

  1. Найти нужную строку в инпекторе и добавить точку останова
  2. Добавить debugger в Ваш скрипт


Оба этих решения требуют поиска нужного файла и нужной строки, которую Вы хотите отладить.

Использование консоли для этой цели, вероятно, менее распространено. Используйте debug(funcName) в консоли, и скрипт приостановит свое выполнение, когда достигнет нужной функции.

Это очень быстрый способ, однако он не работает на закрытых и анонимных функциях. Но если у Вас другая ситуация, то это, вероятно, самый быстрый способ отладить функцию. (Прим. авт.: есть функция console.debug, которая нужна для другого.)

9. Скрипты, не требующие отладки

На современных проектах часто используются фреймворки и библиотеки. Большинство из них хорошо протестированы, и работают достаточно стабильно. Но отладчик все еще обходит файлы, которые не имеет смысла отлаживать. Решение заключается в складывании скриптов в «черный ящик», который не нужно отлаживать. В этот ящик могут входить и Ваши скрипты. Подробнее об этом читайте в этой статье.

10. Найдите важные вещи с помощью более сложных способов отладки

При более сложных сценариях отладки может потребоваться вывести много строк. Одним из способов структурирования выводимых данных является использования различных функций console. Например, console.log, console.debug, console.warn, console.info, console.error, и т.д. Затем Вы можете отфильтровать их в инспекторе. Но иногда это не совсем то, что Вам нужно при отладке. Теперь Вы можете проявить творческий подход, и создавать собственные форматы вывода данных в консоли с помощью CSS.

11. Отслеживайте вызовы функций и ее аргументы.

В консоли Chrome, Вы можете следить за определенными функциями. Каждый раз, когда функция вызывается, это будет залогировано вместе с параметрами, которые в нее переданы.

Это отличный способ увидеть, с какими аргументами вызывается функция. Но я должен сказать, что было бы неплохо, если бы консоль могла определить, сколько аргументов ожидать. В приведенном выше примере func1 ожидает три аргумента, но передается только два. Если это не обрабатывается в коде, то это может привести к ошибке.

12. Быстрый доступ к элементам в консоли

Более быстрый способ использовать querySelector в консоли — это использовать $. $(‘css-селектор’) — вернет первый подходящий элемент, а $$(‘css-селектор’) — вернет все подходящие элементы. Если Вы используете элемент больше одного раза, можно сохранить его в переменную.

13. Postman великолепен (но Firefox быстрее)

Многие разработчики, используют Postman для тестирования AJAX-запросов.

Иногда, для этих целей проще использовать браузер.

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

Откройте инспектор и перейдите на вкладку «Сеть». Кликните правой кнопкой мыши по интересующему запросу, а затем выберите «Отредактировать» и «Отправить повторно». Теперь Вы можете менять все что угодно: исправить заголовок, отредактировать параметры и нажать «Отправить повторно».

Ниже я привел пример запроса, который был отправлен несколько раз с разными параметрами:

14. Точка останова в момент изменения DOM-элемента

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

Быстрый поиск элементов DOM

Для работы со структурой DOM в JavaScript предназначен объект document , который определен в глобальном объекте window . Объект document предоставляет ряд свойств и методов для управления элементами страницы.

Поиск элементов

Для поиска элементов на странице применяются следующие методы:

getElementById(value) : выбирает элемент, у которого атрибут id равен value

getElementsByTagName(value) : выбирает все элементы, у которых тег равен value

getElementsByClassName(value) : выбирает все элементы, которые имеют класс value

querySelector(value) : выбирает первый элемент, который соответствует css-селектору value

querySelectorAll(value) : выбирает все элементы, которые соответствуют css-селектору value

Например, найдем элемент по id:

С помощью вызова document.getElementById(«header») находим элемент, у которого >innerText можно получить текст найденного элемента.

Поиск по определенному тегу:

С помощью вызова document.getElementsByTagName(«p») находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.

Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:


»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Выбранный набор элементов можно использовать в качестве отправной точки для перемещения к другим узлам DOM-дерева. При этом, по сути, один набор элементов используется для создания другого набора. Описанию и демонстрации применения методов jQuery, предназначенных для обхода структуры DOM, посвящены следующие разделы. В них рассматриваются различные типы отношений, которые могут существовать между содержащимися в документе элементами.

Каждый из описанных в последующих разделах методов возвращает объект jQuery. Этот объект может как содержать подходящие объекты, если таковые имеются, так и быть пустым в случае их отсутствия (свойство length таких объектов возвращает нулевое значение).

Перемещение вниз по дереву DOM

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

Методы, используемые для перемещения вниз по иерархической структуре DOM

Метод Описание
children() Выбирает дочерние элементы всех элементов, содержащихся в объекте jQuery
children(селектор) Выбирает все элементы, которые соответствуют указанному селектору и при этом являются непосредственными потомками элементов, содержащихся в объекте jQuery
contents() Возвращает дочерние элементы и текстовое содержимое всех элементов, содержащихся в объекте jQuery
find() Выбирает потомки элементов, содержащихся в объекте jQuery
find(селектор) Выбирает элементы, которые соответствуют указанному селектору и при этом являются потомками элементов, содержащихся в объекте jQuery
find(jQuery), find(HTMLElement),
find(HTMLElement[])
Выбирает пересечение множества непосредственных потомков элементов, содержащихся в объекте jQuery, и множества элементов, содержащихся в объекте аргумента

Метод children() выбирает лишь те элементы, которые являются непосредственными потомками (дочерними элементами) элементов, содержащихся в объекте jQuery, и может принимать селектор в качестве необязательного аргумента, обеспечивающего дополнительную фильтрацию элементов. Метод find() предназначен для выбора всех потомков, а не только дочерних элементов. Метод contents() наряду с дочерними элементами возвращает также текстовое содержимое.

Пример использования методов children() и find() приведен ниже:

В этом примере метод children() используется без селектора, тогда как метод find() используется с одним селектором. Подробная информация о выбранных элементах выводится на консоль вместе с указанием их количества:

Среди приятных особенностей методов children() и find() можно отметить отсутствие дублирования элементов в выбранном наборе. Это подтверждает пример, приведенный ниже:

В этом примере мы начинаем с того, что создаем объект jQuery, который содержит все элементы div с классом drow и все элементы div с классом dcell. Ключевым моментом здесь является то, что все элементы, принадлежащие классу dcell, одновременно являются элементами класса drow. Это означает, что мы имеем дело с двумя перекрывающимися множествами элементов-потомков, и в случае использования метода find() с селектором img это могло бы привести к дублированию элементов в результирующем наборе, поскольку элементы img являются потомками элементов div обоих классов. Однако jQuery выручает нас и самостоятельно заботится о том, чтобы среди возвращаемых элементов дублирование отсутствовало, что подтверждается результатами, выводимыми на консоль:

Перемещение вверх по дереву DOM

Перемещению вверх по DOM-дереву соответствует поиск родителей и предков элементов, содержащихся в объекте jQuery. Методы, используемые для таких перемещений, приведены в таблице ниже:

Методы, используемые для перемещения вверх по иерархической структуре DOM

Описание Метод
closest(селектор), closest(селектор, контекст) Выбор ближайшего предка, соответствующего указанному селектору, для каждого элемента, содержащегося в объекте jQuery
closest(jQuery), closest(HTMLElement) Выбор ближайшего предка для каждого элемента в объекте jQuery, совпадающего с одним из элементов, содержащихся в объекте аргумента
offsetParent() Нахождение ближайшего предка, значением CSS-свойства position которого является fixed, absolute или relative
parent(), parent(селектор) Выбор непосредственных предков для каждого элемента в объекте jQuery с возможностью их фильтрации с помощью селектора
parents(), parents(селектор) Выбор предков для каждого элемента в объекте jQuery с возможностью их фильтрации с помощью селектора
parentsUntil(селектор), parentsUntil(селектор, селектор) Выбор предков для каждого элемента в объекте jQuery до тех пор, пока не встретится элемент, соответствующий селектору. Результаты могут фильтроваться посредством второго селектора
parentsUntil(HTMLElement), parentsUntil(HTMLElement, селектор), parentsUntil(HTMLElement[]), parentsUntil(HTMLElement[], селектор) Выбирает предков для каждого элемента в объекте jQuery до тех пор, пока не встретится один из указанных элементов. Результаты могут фильтроваться посредством второго селектора

Выбор родительских элементов

Метод parent() позволяет выбрать родительский элемент для каждого из элементов, содержащихся в объекте jQuery. Если методу предоставляется селектор, то в результирующий набор будут включаться только те родительские элементы, которые соответствуют селектору. Пример использования метода parent() приведен ниже:

В этом сценарии сначала выбираются все элементы div, принадлежащие классу dcell, а затем вызывается метод parent(), выбирающий все родительские элементы. Здесь также демонстрируется использование метода parent() с селектором. Подробная информация о каждом выбранном родительском элементе выводится на консоль с использованием метода each:

Выбор предков

Метод parents() (обратите внимание на последнюю букву s в его названии) обеспечивает возможность выбора всех, а не только непосредственных предков (родителей) элементов, содержащихся в объекте jQuery. Как и в предыдущем случае, метод может принимать в качестве аргумента селектор для фильтрации результатов.

Пример использования метода parents() приведен ниже:

В этом примере метод parents() используется для выбора предков двух предварительно выбранных элементов img. Информация о каждом предке выводится на консоль:

Метод parentsUntil() является еще одной разновидностью методов, предназначенных для выбора предков элементов. Для каждого из элементов, содержащихся в объекте jQuery, метод parentsUntil() осуществляет перемещение вверх по иерархической структуре DOM, выбирая элементы-предки до тех пор, пока не встретится элемент, соответствующий селектору. Пример использования этого метода приведен ниже:

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

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

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

Выбор первого подходящего предка

Метод closest() позволяет выбирать первого из предков, соответствующих селектору, для каждого элемента в объекте jQuery. Пример использования этого метода приведен ниже:

В этом примере мы сначала выбираем элементы img в документе, а затем находим для каждого из них с помощью метода closest() ближайшего предка, который принадлежит классу drow.

Область выбора предков можно сузить, передав методу closest() объект HTMLElement() в качестве второго аргумента. Те предки, которые не являются контекстным объектом или его потомками, не включаются в выбранный набор. На консоль выводится следующий результат:

Методу closest() также можно передать в качестве аргумента объект jQuery, объект HTMLElement или массив объектов HTMLElement. В этом случае метод closest() будет продолжать процесс выбора предков для каждого из элементов, содержащихся в исходном объекте jQuery, до тех пор пока не встретится объект, переданный в качестве аргумента.

Метод offsetParent() представляет собой вариацию на тему метода closest() и предназначен для нахождения первого потомка, значение CSS-свойства position которого равно relative, absolute или fixed. Такие элементы называются , и их поиск может оказаться полезным при работе с анимацией. Пример использования этого метода приведен ниже:

В этой версии документа сначала с помощью CSS устанавливается значение свойства position элементов с атрибутом id равным row1 и row2. Далее в документе выбирается один из элементов img и с помощью метода offsetParent() находится ближайший позиционированный потомок выбранного элемента. После этого с помощью метода css() для свойства background-color выбранного элемента устанавливается значение lightgrey. Вид результирующей страницы в окне браузера представлен на рисунке:

Перемещение по дереву DOM в пределах одного иерархического уровня

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


Методы, используемые для перемещения между узлами DOM-дерева в пределах одного иерархического уровня

Метод Описание
next(), next(селектор) Выбирает сестринские элементы, непосредственно следующие за каждым из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора
nextAll(), nextAll(селектор) Выбирает все последующие сестринские элементы для каждого из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора
nextUntil(селектор), nextUntil(селектор, селектор), nextUntil(jQuery), nextUntil(jQuery, селектор), nextUntil(HTMLElement[]), nextUntil(HTMLElement[], селектор) Выбирает для каждого элемента последующие сестринские элементы вплоть до элемента (но не включая его), соответствующего селектору или содержащегося в объекте jQuery или массиве HTMLElement[]. Имеется дополнительная возможность фильтрации результатов с использованием селектора
prev(), prev(селектор) Выбирает сестринские элементы, непосредственно предшествующие каждому из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора
prevAll(), prevAll(селектор) Выбирает все предшествующие сестринские элементы для каждого из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора, передаваемого методу в качестве второго аргумента
prevUntil(селектор), prevUntil(селектор, селектор), prevUntil(jQuery), prevUntil(jQuery, селектор), prevUntil(HTMLElement[]), prevUntil(HTMLElement[], селектор) Выбирает для каждого элемента предшествующие сестринские элементы вплоть до элемента (но не включая его), соответствующего селектору или содержащегося в объекте jQuery или массиве HTMLElement[]. Имеется дополнительная возможность фильтрации результатов с использованием селектора, передаваемого методу в качестве второго аргумента
siblings(), siblings(селектор) Выбирает все сестринские элементы для каждого из элементов, содержащихся в объекте jQuery. Имеется дополнительная возможность фильтрации результатов с использованием селектора

Выбор всех сестринских элементов

Метод siblings() обеспечивает возможность выбора всех сестринских элементов для всех элементов, содержащихся в объекте jQuery. Пример использования этого метода приведен ниже:

В этом примере мы сначала выбираем два элемента img, затем находим их родительские элементы с помощью метода parent(), после чего выбираем сестринские элементы последних с помощью метода siblings(). При этом выбираются как предшествующие, так и последующие сестринские элементы и для свойства border каждого из них устанавливается определенное значение с помощью метода css(). Вид результирующей страницы в окне браузера представлен на рисунке:

Обратите внимание: выбираются лишь сестринские элементы, но не сами элементы. Разумеется, эта ситуация изменится, если один из элементов, содержащихся в объекте jQuery, является сестринским по отношению к другому, как показано в примере ниже:

В этом сценарии мы начинаем с выбора всех элементов div, являющихся дочерними по отношению к элементу rowl, а затем вызываем метод siblings(). Каждый из элементов в выбранном наборе является сестринским в отношении по крайней мере одного из других элементов, как показано на рисунке:

Выбор последующих и предшествующих сестринских элементов

Я не собираюсь подробно останавливаться на каждом из методов, предназначенных для выбора предшествующих и последующих сестринских элементов, поскольку все они работают аналогично любому другому методу, обеспечивающему перемещение между узлами DOM-дерева. Пример использования методов nextAll() и prevAll() приведен ниже:

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

Техники работы с DOM: родительские, дочерние и соседние элементы

17 Декабря 2015

Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем. И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад, когда jQuery набирал популярность.

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

Подсчет дочерних узлов

Для демонстрации я буду использовать следующую разметку HTML, в течение статьи мы ее несколько раз изменим:

Если я хочу подсчитать, сколько элементов внутри

    , я могу сделать это двумя способами.

Как видите, результаты одинаковые, хотя техники используются разные. В первом случае я использую свойство children . Это свойство только для чтения, оно возвращает коллекцию элементов HTML, находящихся внутри запрашиваемого элемента; для подсчета их количества я использую свойство length этой коллекции.

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

Я мог бы попытаться использовать childNodes.length (вместо children.length ), но посмотрите на результат:

Он возвращает 13, потому что childNodes это коллекция всех узлов, включая пробелы — учитывайте это, если вам важна разница между дочерними узлами и дочерними узлами-элементами.

Проверка существования дочерних узлов

Для проверки наличия у элемента дочерних узлов я могу использовать метод hasChildNodes() . Метод возвращает логическое значение, сообщающие об их наличии или отсутствии:

Я знаю, что в моем списке есть дочерние узлы, но я могу изменить HTML так, чтобы их не было; теперь разметка выглядит так:

И вот результат нового запуска hasChildNodes() :

Метод по прежнему возвращает true . Хотя список не содержит никаких элементов, в нем есть пробел, являющийся валидным типом узла. Данный метод учитывает все узлы, не только узлы-элементы. Чтобы hasChildNodes() вернул false нам надо еще раз изменить разметку:

И теперь в консоль выводится ожидаемый результат:

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

Добавление и удаление дочерних элементов

Есть техника, которые можно использовать для добавления и удаления элементов из DOM. Наиболее известная из них основана на сочетании методов createElement() и appendChild() .

В данном случае я создаю

Но вместо вставки специально создаваемого элемента, я также могу использовать appendChild() и просто переместить существующий элемент. Предположим, у нас следующая разметка:

Я могу изменить место расположения списка с помощью следующего кода:

Итоговый DOM будет выглядеть следующим образом:

Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим body . И хотя обычно метод appendChild() используется для добавления элементов созданных с помощью createElement() , он также может использоваться для перемещения существующих элементов.

Я также могу полностью удалить дочерний элемент из DOM с помощью removeChild() . Вот как удаляется наш список из предыдущего примера:


Теперь элемент удален. Метод removeChild() возвращает удаленный элемент и я могу его сохранить на случай, если он потребуется мне позже.

Таке существует метод ChildNode.remove() , относительно недавно добавленный в спецификацию:

Этот метод не возвращает удаленный объект и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.

Замена дочерних элементов

Я могу заменить существующий дочерний элемент новым, независимо от того, существует ли этот новый элемент или я создал его с нуля. Вот разметка:

Здесь я создал элемент, добавил текстовый узел с помощью createTextNode() и вставил его на страницу на место параграфа. Теперь на месте первоначального параграфа следующий HTML:

Как видите, метод replaceChild() принимает два аргумента: новый элемент и заменяемый им старый элемент.

Я также могу использовать это метод для перемещения существующего элемента. Взгляните на следующий HTML:

Я могу заменить третий параграф первым параграфом с помощью следующего кода:

Теперь сгенерированный DOM выглядит так:

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

Существует несколько разных способов выбора конкретного элемента. Как показано ранее, я могу начать с использования коллекции children или свойства childNodes . Но взглянем на другие варианты:

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

Я могу выбрать первый и последний элементы с помощью этих свойств:

Я также могу использовать свойства previousElementSibling и nextElementSibling , если я хочу выбрать дочерние элементы, отличные от первого или последнего. Это делается сочетанием свойств firstElementChild и lastElementChild :

Также есть сходные свойства firstChild , lastChild , previousSibling , и nextSibling , но они учитывают все типы узлов, а не только элементы. Как правило, свойства, учитывающие только узлы-элементы полезнее тех, которые выбирают все узлы.

Вставка контента в DOM

Я уже рассматривал способы вставки элементов в DOM. Давайте перейдем к похожей теме и взглянем на новые возможности по вставке контента.

Во-первых, есть простой метод insertBefore() , он во многом похож на replaceChild() , принимает два аргумента и при этом работает как с новыми элементами, так и с существующими. Вот разметка:

Обратите внимание на параграф, я собираюсь сначала убрать его, а затем вставить перед списком, все одним махом:

В полученном HTML параграф будет перед списком и это еще один способ перенести элемент.

Как и replaceChild() , insertBefore() принимает два аргумента: добавляемый элемент и элемент, перед которым мы хотим его вставить.

Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() .

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

  • beforebegin – Вставляет строку перед указанным элементом.
  • afterbegin – Вставляет строку внутри указанного элемента перед первым дочерним элементом.
  • beforeend – Вставляет строку внутри указанного элемента после последнего дочернего элемента
  • afterend – Вставляет строку после указанного элемента

Чтобы было проще понять, как работает каждое из этих значений, взгляните на комментарии в сниппете разметки. Подразумевая, что #el div это целевой элемент, каждый комментарий показывает, где будет находится вставленный HTML.

Этот пример делает понятным, что делает каждое из этих значений.

Поддержка в браузерах

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

Следующие возможности поддерживаются везде, включая старые версии IE:

Эти возможности поддерживаются в IE9+ и других современных браузерах:

И остается метод Node.remove(), который, как уже упоминалось, поддерживается Microsoft только начиная с браузера Edge.

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

Заключение


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

Найти дочерний элемент по классу на чистом JavaScript

Как на чистом JavaScript найти дочерний элемент по имени класса, когда в выборке имеем доступ только к родителю

3 ответа 3

Можно взять все дочерние элементы методом childNodes . А затем пройтись по ним и узнать у кого есть определенный класс.

Метод querySelector определен для всех DOM элементов:

Обратите внимание на точку перед названием класса.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript dom или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35402

Хранилище полезных ресурсов

Главная » 2013 » Март » 31 » Поиск элементов в DOM

Поиск элементов в DOM (Document Object Model)

DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

  1. Поиск по id
  2. Поиск по тегу
  3. Получить всех потомков
  4. Поиск по name : getElementsByName
  5. Другие способы

Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById , getElementsByTagName и getElementsByName .

Более мощные способы поиска предлагают javascript-библиотеки.

Поиск по id

Самый удобный способ найти элемент в DOM — это получить его по id . Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div ‘е c :

Поиск по тегу

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

Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li :

Что интересно, getElementsByTagName можно вызывать не только для document , но и вообще для любого элемента, у которого есть тег (не текстового).

При этом будут найдены только те объекты, которые находятся под этим элементом.

Например, следующий вызов получает список элементов LI , находящихся внутри первого тега div :

Получить всех потомков


Вызов elem.getElementsByTagName(‘*’) вернет список из всех детей узла elem в порядке их обхода.

Например, на таком DOM:

Выведет последовательность: ol1, li1, li2 .

Поиск по name : getElementsByName

Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name ) равно данному.

Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это form , input , a , select , textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div , p и т.п.

Другие способы

Существуют и другие способы поиска по DOM: XPath, cssQuery и т.п. Как правило, они реализуются javascript-библиотеками для расширения стандартных возможностей браузеров.

Также есть метод getElementsByClassName для поиска элементов по классу, но он совсем не работает в IE, поэтому в чистом виде им никто не пользуется.

Правило здесь простое: один элемент — Element , много — Elements . Все методы *Elements* возвращают список узлов.

Поиск элемента DOM с определенным текстом и его изменение

Я пытаюсь понять, как в необработанном javascript (без jQuery и т.д.) найти элемент со специальным текстом и изменить этот текст.

Мое первое воплощение решения. менее адекватно. То, что я сделал, было в основном:

Наивно я думал, что мне удалось с летающими цветами, тем более, что это было так просто. Итак, я добавил изображение к моему примеру и думал, что могу проверять каждые 5 секунд (потому что эта строка может динамически вводить DOM). и изображение мерцает каждые 5 секунд.

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

Теперь всегда «рекурсивно просматривайте детей до тех пор, пока вы не найдете подход» самый глубокий ребенок со строкой «, которого я хочу избежать. И даже тогда я скептически отношусь к тому, что» изменение innerHTML на что-то другое» является правильным способом обновления элемента DOM.

Итак, каков правильный способ поиска по DOM для строки? И какой правильный способ обновить текст элемента DOM?

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

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

Макро-кассета старого времени, запись, прослушивание, медитация.

Btw, см. Найти и заменить текст с помощью JavaScript в блоге Джеймса Падолси

Не используйте innerHTML с регулярным выражением, он почти наверняка терпит неудачу для нетривиального содержимого. Кроме того, по-прежнему существуют различия в том, как браузеры генерируют его из живой DOM. Замена innerHTML также приведет к удалению всех прослушивателей событий, добавленных в качестве свойств элемента (например, element.onclick = fn ).

Лучше всего, если вы можете иметь строку, заключенную в элемент с атрибутом или свойством, которое вы можете искать (id, class и т.д.), но при этом поиск текстовых узлов — лучший подход.

Изменить

Попытка использовать функцию выделения текста общего назначения для HTML-документа может привести к очень сложному алгоритму, поскольку строка может быть частью сложной структуры, например:

Поиск строки «специальный заголовок» сложный, поскольку он разделен на 2 элемента. Обтекание его другим элементом (например, для выделения) также не является тривиальным, поскольку результирующая структура DOM должна быть действительной. Например, текст, соответствующий «некоторым специальным» в приведенном выше, может быть обернут в span, но не div.

Любая такая функция должна сопровождаться документацией с указанием ее ограничений и наиболее подходящего использования.

Поиск элементов внутри выбранных

Материал из JQuery

Ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.

Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.

$(«div»).find(«span») вернет все элементы span, находящиеся внутри div-элементов.
$(«div»).find(«.bigBlock») вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.
$(«div»).find( $(«.bigBlock») ) вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода .find(). Например, искать span-элементы, лежащие внутри div’ов правильнее так:

.find() же удобно использовать, когда некоторые элементы уже найдены, и вам необходимо осуществить поиск элементов внутри них:

Так же, .find() удобен для использования в цепочках методов:

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

Исчерпывающий пример

Внутри каждого ul-элемента, найдем первый li-элемент и последний p-элемент:

Фильтрация элементов помощью find

Кроме поиска, .find() может осуществлять своеобразную фильтрацию. Например вот так можно отфильтровать span‘ы, оставив только те, которые лежат внутри параграфов:

Илон Маск рекомендует:  Что такое код ncurses_erase
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL