JavaScript | На каком HTML-элементе был клик?

Как получить объект HTML-элемента по которому был совершён клик в документе?

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

Решение

Мы повесили слушатель события на весь документ. То есть метод addEventListener() был вызван у объекта document. Это максимально расширяет наши возможности в отлове любого элемента из HTML-разметки. Первым параметром мы указали тип события, который мы хотим отловить(услышать) — это « click «. Вторым параметром мы передали функцию-обработчик, которая выполнится только при совершении события клика на документе. Это функция обратного вызова т. е. callback. Функция-обработчик сработает только в момент свершения события. Мы просто её передали, а не вызвали. Для простоты восприятия функция оформлена в виде стрелочной.

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

Пример простейшего взаимодействия с «кликнутым» элементом

Например мы можем менять внутреннее содержимое «кликнутого» элемента, если оно есть.

Откройте любую страницу любого сайта. Введите в консоль эту команду и покликайте на текстовые элементы страницы (не ссылки). Будет весело!

Источник

Блог о Frontend-разработке, ботоводстве, iMacros + Javascript

Исследование различных веб-технологий, математических алгоритмов и проектирование веб-приложений.

Рубрики

Комменты

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

Исходный код страницы

Для начала, я хочу очень кратко рассказать про то, из чего состоит веб-страница. Вы можете открыть любой сайт, например мой блог и нажать Ctrl+U (или правой кнопкой на странице и выбрать «Исходный код»). Вы увидите код, это обычный текст в формате HTML, который браузер преобразует в веб-страницу. Ключевые слова, заключенные в «<>» — называются тегами, свойства внутри них — атрибутами и значениями атрибута. Все это нам пригодится, чтобы отыскивать необходимые теги с нужной информацией.

Пример:

Что же делает браузер с этим кодом? Браузер, руководствуясь этим кодом, располагает информацию на странице в указанном порядке, подгружает таблицы стилей css, которые добавляют оформление элементам, подгружает и вставляет картинки, скачивает и выполняет различные скрипты. Правила, по которым браузер это делает — называются спецификацией, которая необходима, чтобы все браузеры отрисовывали страницы и обрабатывали скрипты одинаково.

DOM (Document Object Model) – объектная модель страницы

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

DOM – это представление страницы в виде дерева объектов, доступное для чтения и изменения через JavaScript.

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

Методы извлечения информации из тегов средствами iMacros

У iMacros есть возможности для извлечения текста и даже html-кода из тегов. Для начала я рекомендую вам установить расширение FireBug, если вы этого еще не сделали. Открывается он по нажатию клавиши F12, либо вы можете нажать в любом месте страницы правой кнопкой и тыкнуть «Инспектировать элемент при помощи Firebug».

Чтобы потренироваться и как следует разобраться, я создал для вас специальную страничку
http://polygon.nagibaka.ru/lessons/lesson3/index.htm

Давайте приступим, я рекомендую вам сразу открыть эту ссылку в Firefox. Поскольку вам предстоит писать много кода, рекомендую первым делом поставить себе какой-нибудь редактор, например весьма распространенный Notepad++ или же мой любимый и в сто раз более удобный Sublime Text 3, я писал о плагинах для него и режиме Vim для быстрого и мощного редактирования.

Давайте нажмем на «Запись» в iMacros, тыкнем по первому заголовку и остановим запись.

Мы получим вот такой скрипт(Current.iim):

Давайте переделаем его в JS.
Создайте новый файл, например test.js. Допустим, нам необходимо получить содержимое тега «

Результат(test.js):

Обратите внимание — я заменил «Тестовая страница» на «*» — поскольку текст заголовка может быть любым, а звездочка нам говорит, что текст может быть произвольным
TYPE=H1 — указывает что мы ищем тег «

«, можно указать любой другой
POS=1 — указывает, что мы выбираем первый попавшийся тег

Методы извлечения информации из тегов средствами Javascript

Код на JS(test.js):

Источник

Использование скриптовых элементов

Элемент script

Таблица 7-17: Элемент script

Таблица 7-18: Локальные атрибуты элемента script

Определение внутреннего скрипта

Самый простой способ определить скрипт – это сделать это внутри документа. Это обозначает, что вы включаете JavaScript выражения в HTML страницу. В листинге 7-17 представлен пример.

Листинг 7-17: Определение внутреннего скрипта

Рисунок 7-8: Результат выполнения простого скрипта

Загрузка внешней скриптовой библиотеки

Листинг 7-18: Содержание скриптового файла simple.js

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

Листинг 7-19: Загрузка внешнего скрипта с использованием атрибута src

Значение атрибута src – это URL файла скрипта, который вы хотите загрузить. Я создал файл simple.js в том же каталоге, что и HTML файл, так что я могу использовать в этом примере относительный URL. Вы можете увидеть результат выполнения скрипта на рисунке 7-9.

Рисунок 7-9: Результат выполнения внешнего скрипта

Отсрочка выполнения скрипта

Листинг 7-20: Содержание скриптового файла simple2.js

Листинг 7-21: Ссылка на скриптовый файл

При загрузке предыдущей HTML страницы, вы не получите желаемого результата, как показано на рисунке 7-10.

Рисунок 7-10: Проблема со временем выполнения скрипта

Листинг 7-22: Решаем проблему со временем выполнения скрипта, передвигая элемент script в конец документа

Рисунок 7-11: Результат выполнения скрипта, примененный к элементу a

Листинг 7-23: Использование элемента script с атрибутом defer

Загрузка этой страницы в браузер приводит к тому же результату, как и перемещение элемента script в конец страницы. Скрипт может найти элемент code и изменить текстовое содержание, что приводит к тому же результату, что вы видели на рисунке 7-11.

Вы можете использовать атрибут defer только для внешних скриптовых файлов. Это не будет работать для внутренних скриптов.

Асинхронное выполнение скриптов

Листинг 7-24: Использование атрибута async

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

Элемент noscript

Таблица 7-19: Элемент noscript

Несмотря на то, что в наши дни осуществляется широкая поддержка JavaScript, есть еще некоторые специализированные браузеры, которые не поддерживают его. Даже когда браузер применяет JavaScript, пользователь может отключить его; во многих крупных корпорациях работает правило без-JavaScript для работников компании. Элемент noscript позволяет вам работать с этими пользователями, то есть вы можете отобразить для них содержание, для работы с которым не требуется JavaScript, или, по крайней мере, объяснить, что они не могут использовать ваш сайт или страницу, если не включен JavaScript. В листинге 7-25 показано, как используется элемент noscript для отображения простого сообщения.

Листинг 7-25: Использование элемента noscript

Вы можете увидеть результат использования элемента noscript на рисунке 7-12. Для достижения этого результата, я отключил поддержку JavaScript в Google Chrome и загрузил HTML из листинга.

Рисунок 7-12: Результат использования элемента noscript

Обратите внимание, что оставшаяся часть страницы обрабатывается как обычно, и содержание элементов по-прежнему отображается.

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

Листинг 7-26: Использование элемента noscript для перенаправления браузера пользователя

Источник

Как узнать, в каком файле или скрипте выполняется текущий элемент?

2 ответа

Кто-нибудь знает, как узнать, в каком файле находится конкретная функция с gdb?

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

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

На последнем шаге (6) мы знаем, что имя файла navigationf.js, в котором выполняется текущий скрипт.

используйте профилировщик javascript в инструментах chrome dev.

Похожие вопросы:

Как узнать, в каком файле и строке была определена переменная с помощью консоли google chrome? Например, переменная Native (из MooTools) была определена в глобальной области видимости. Я хочу.

Я пишу класс ведения журнала в C# и хотел бы добавить метод, из которого был сделан вызов журнала. Делать это вручную не слишком привлекательно. Есть ли способ узнать, в каком методе находится.

Кто-нибудь знает, как узнать, в каком файле находится конкретная функция с gdb?

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

У меня на странице есть несколько iframes (редакторов). Как мне узнать, в каком iframe находится мой текущий выбор? В этом редакторе у меня есть действительный контекст html. Это выглядит так.

Я новичок в ruby. Я хочу знать, когда / где установлен текущий пользователь. Я знаю, что куки-файлы будут генерироваться для каждого запроса URL. И где хранятся детали сеанса? И где установлен.

Я пытаюсь выяснить, есть ли стандартный способ (а не хак, который работает) узнать имя функции, которая в данный момент выполняется в скрипте POSIX shell. Я знаю, что могу вернуть имя сценария с.

Я пытаюсь решить проблему, мне нужно знать, в каком файле выполняется конкретный запрос, можно ли увидеть, какой файл выполняет команду? Я включил general_log и могу видеть запрос.

Источник

Поиск элементов документа в JavaScript

В этой статье мы рассмотрим какие в JavaScript существуют методы для выбора элементов на странице, и как с ними работать.

Методы JavaScript для выбора DOM элементов

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

Их отличие сводится в различии количества возвращаемых DOM элементов. Первый ( querySelectorAll ) возвращает все найденные элементы, а второй ( querySelector ) – только первый из них.

querySelectorAll – поиск элементов по CSS селектору

querySelectorAll – применяется, когда нужно найти все элементы по CSS селектору внутри страницы или определённого элемента.

В приведённом коде css_selector – это строка, содержащая CSS селектор, в соответствии с которым необходимо осуществить поиск элементов.

Узнать количество элементов в коллекции можно с помощью свойства length :

Обратиться к определённому элементу в коллекции можно по его индексу. Индексы начинаются с 0.

Перебрать коллекцию выбранных элементов можно с помощью цикла for:

Перебор элементов посредством цикла for. of:

Примеры

1. Выполним проверку существование элементов с атрибутом data-toggle=»modal» :

querySelector – выбор элемента по CSS селектору

В приведённом коде selector – это строка, содержащая CSS селектор, в соответствии с которым необходимо найти элемент.

В качестве результата метод querySelector возвращает ссылку на объект типа Element или null (если элемент не найден).

Примеры

2. Выполнить поиск элемента по классу nav :

3. Обратиться к элементу

, находящемуся в теге

4. Проверить наличие элемента с классом modal на странице:

«Старые» методы для выбора элементов

К данной категории относятся методы, которые сейчас практически не применяются для поиска элементов. Их в основном можно встретить в «старом» коде.

getElementById – получение элемента по значению id

Указания значения id необходимо выполнять с учётом регистра, т.к., например, main и Main – это разные значения.

Например, получим элемент, имеющий в качестве id значение pagetitle :

Действие метода getElementById можно очень просто выполнить с помощью querySelector :

getElementsByClassName – получение списка элементов по именам классов

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

Например, выберем элементы на странице у которых имеются классы btn и btn-danger :

Функция getElementsByClassName позволяет искать элементы не только внутри всего документа, но и в конкретном элементе.

Выполнить эту задачу с помощью querySelectorAll можно более эффективно:

getElementsByTagName – получение элементов по имени тега

Метод getElementsByTagName предназначен для получения коллекции элементов по имени тега.

Этот пример через querySelectorAll можно решить так:

getElementsByName – получение элементов по значению атрибута name

Метод getElementsByName может применяться, когда вам нужно выбрать элементы, имеющие атрибут name с указанным значением.

Например, выбрать все элементы на странице с name=»phone» :

Реализовать это с querySelectorAll можно следующим образом:

getElementsBy* и живые коллекции

В этом примере получим элементы li находящиеся в #list и выведем их количество в консоль. Затем через 5 секунд программно добавим ещё один элемент li в #list и ещё раз возвратим их количество в консоль.

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

Как вы видите количество элементов в коллекции не изменилось.

Если вам нужно обновить статическую коллекцию элементов после изменения DOM, то метод querySelectorAll нужно вызвать ещё раз.

Итого

В JavaScript можно выделить 6 основных методов для выбора элементов на странице.

Дополнительные материалы

matches – проверка на соответствие элемента CSS селектору

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

closest – поиск ближайшего предка по CSS селектору

closest – это метод, который позволяет найти ближайшего предка для элемента в соответствии с указанным селектором. При этом поиск предков начинается с самого элемента, для которого данный метод вызывается и если он будет ему соответствовать, то closest вернёт сам этот элемент.

В качестве результата метод closest возвращает найденный DOM-элемент или null (если соответствующий элемент найден не был).

contains – проверка наличия одного элемента внутри другого

contains – это метод, посредством которого можно проверить существование одного элемента внутри другого.

Задачи

Имеется страница. В ней следует выбрать:

Источник