Как получить href из a? — efim360.ru
Одной командой
document.getElementsByTagName("a")[0].href
Вместо нуля нужно подставить индекс элемента a.
Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте ENTER.
Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.
Описание
Мы уже решали эту задачу в публикации «Как получить все ссылки на HTML-странице?«. Рассмотрим подробнее вопрос получения атрибута href у HTML-элемента <a>.
Как мы знаем из курса HTML, у любого HTML-элемента существуют атрибуты, которые можно назначать (или не назначать). Эти атрибуты могут быть глобальными и уникальными. Глобальные — применяются ко всем элементам HTML (например, id, title, class, style). Уникальные — работают только со своими HTML-элементами (например, alt, src, href).
Мы знаем, что в JavaScript всё является объектами. Из этого следует, что каждый HTML-элемент можно представить в виде объекта и разложить информацию о нём на пары «ключ/значение». Объектная модель документа (DOM) предоставляет нам нужный функционал для этого разбиения пар «ключ/значение». В итоге мы должны получить такой объект А, у которого есть ключ href и его значение.
Предлагаю потренировать на каком-нибудь интернет магазине, где много ссылок. Пусть это будет такой URL:
https://www.ozon.ru
Скриншот на момент написания этой публикации:
Главная страница www.ozon.ru — 17-11-2020Для захвата всей страницы я использую браузерное расширение FireShot.
Не будем глубоко погружаться внутрь сайта. На главной странице много блоков, которые являются ссылками со своими атрибутами href.
Сниппеты-ссылки на главной — www.ozon.ru — 17-11-2020
Посмотрим на разметку:
Фрагмент разментки главной страницы — www. ozon.ru — 17-11-2020Всё как мы и предполагали. Каждая «картинка» (условно) — это ссылка. То есть с главной страницы можно перейти глубже по сайту. Отлично.
Соберём все HTML-элементы <a>, которые встречаются на главной странице и посмотрим на них:
var a = document.getElementsByTagName("a")
Нам возвращается коллекция HTML-элементов <a>:
HTML-коллекция элементов a с главной сайта ozonПо сути HTML-коллекция — это массиво-подобный объект. Инструменты разработчика в браузере нам подсвечивают название самого элемента, а также его классы.
Мы можем обратиться к любому элементу коллекции по его индексу:
a[100]
или обобщённо:
document.getElementsByTagName("a")[100]
В обоих случаях мы получаем нужный нам элемент (объект JavaScript):
Обращение к 101 элементу HTML-коллекцииТеперь можно сразу получить искомый href из a. Для этого обратимся к объекту по нужному ключу:
document.getElementsByTagName("a")[100]. href
Результат вывода:
Получение href — JavaScript
Альтернативный способ через путь JS
Отловим один элемент <a> с изображением робота и подписью «Для мальчиков». Для этого скопируем в разметке путь JS:
Копирование пути JS в интструментах разработчикаСкопированная команда будет выглядеть так:
document.querySelector("#\\37 135 > a")
Результат выполнения:
Элемент а с переходом в раздел для мальчиковДанная команда вернёт нам объект, а значит мы сразу можем обратиться к ключу href и получить заветное значение:
document.querySelector("#\\37 135 > a").href
Результат выполнения:
Значение атрибута href из а — JavaScriptМы получили значение href из a. В нашем случае это URL:
"https://www.ozon.ru/category/igrushki-dlya-malchikov-7135/"
Ссылки
JavaScript | Как получить все ссылки на HTML-странице?
JavaScript | Массивы (Array)
JavaScript | Объявление массива через квадратные скобки []
DOM
ECMAScript — Living Standard — https://tc39. es/ecma262/#sec-array-objects
Свойства конструктора Array
Свойства объекта прототипа Array
HTML DOM Anchor href Свойство
❮ Anchor Object
Пример
Изменение адресата (URL) ссылки:
document.getElementById(«myAnchor»).href = «http://www.cnn.com/ «;
Попробуйте сами »
Определение и использование
Свойство href устанавливает или возвращает значение атрибута href ссылки.
Атрибут href указывает назначение ссылки.
Поддержка браузера
Недвижимость | |||||
---|---|---|---|---|---|
ссылка | Да | Да | Да | Да | Да |
Синтаксис
Возврат свойство HREF:
AnchoroBject .
Установите свойство HREF:
.0014 Возможные значения: Получить URL ссылки: var x = document.getElementById(«myAnchor»).href; Попробуйте сами » Другой пример получения URL ссылки (относительный URL): Значение Описание URL-адрес Указывает URL-адрес ссылки. Технические детали
Возвращаемое значение: Строка, представляющая URL-адрес ссылки. Возвращает полный URL-адрес, включая протокол (например, http://) Дополнительные примеры
Пример
Пример
Попробуйте сами.
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
3 Top6s Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.
— JavaScript — Форумы SitePoint
ameerulislam
1
Я только что изучал шаблон и увидел, что в атрибуте href есть пустой javascript:{}. Кажется, это мало что дало. Это просто заполнитель или какой-то комментарий, что эта навигация работает с javascript?
Обратите внимание, что он был обнаружен в vav-ссылках с неупорядоченными списками, как показано ниже.
Учебники по пикнику
2
Используется вместо #. Если при нажатии используется #, вы переходите в верхнюю часть окна. JavaScript:; не страдает от этого
амерулислам
3
Эрик Уотсон:
Используется вместо #. Если при нажатии используется #, вы переходите в верхнюю часть окна. JavaScript:; не страдает от этого
да вроде ничего не делает. Мне было интересно, почему лучше поставить это (javascript: {}) или даже #, чем оставить его пустым? Это просто, чтобы сделать его читаемым?
ральф
4
Удалите его и забудьте, что когда-либо его видели. В любом случае встроенный JS — это мусор, и ему нечего делать вместо правильного URL-адреса.
фелгалл
5
Это даже не правильный встроенный JavaScript. Размещение JavaScript там не дает ему никакого доступа к информации о событии, вызвавшем запуск кода.
Он также предоставляет неработающую ссылку для всех, у кого не включен JavaScript.
амируислам
6
Спасибо, ребята, но не могли бы вы, ребята, сказать мне, что лучше оставить пустой href или href с # ? Или не важно!?
ральф
7
амерулислам:
лучше оставить пустой href или href с # ? Или не важно!?
Если щелкнуть ссылку с пустым href, вы получите сообщение об ошибке, а при нажатии на ссылку с символом # в качестве значения href просто перенесет вас наверх страницы, поэтому последний вариант лучше.
Редактировать:
Хм, я думал, что это так, но подумал, что лучше проверить, и это не так — нет сообщения об ошибке, когда href пустой. Но все же…
… реальный вопрос в том, зачем на вашей странице ссылка на любой из них? Если ссылке некуда идти, она не должна быть ссылкой.
амируислам
8
ральф_м:
Но главный вопрос в том, зачем на вашей странице ссылка на любой из них? Если ссылке некуда идти, она не должна быть ссылкой.
Только для временного использования. Для демонстрационных шаблонов. Ты знаешь что.
ральф
9
амерулислам:
Только для временного использования. Для демонстрационных шаблонов.
Я всегда использую #, потому что в прошлом у меня были ошибки, когда там ничего не было.
Вы это знаете.
Я не знаю, как вы относитесь к дизайну. У многих людей есть hrefs, в которых есть только #, потому что ссылка bahavoir управляется JavaScript. Однако это паршивое кодирование, поскольку эти ссылки бесполезны с выключенным JS, что свидетельствует о плохой методологии кодирования.
амируислам
10
ральф_м:
Я всегда использую #, потому что в прошлом у меня были ошибки, когда там ничего не было.
Я не знаю, как вы относитесь к дизайну. У многих людей есть hrefs, в которых есть только #, потому что ссылка bahavoir управляется JavaScript. Однако это паршивое кодирование, поскольку эти ссылки бесполезны с выключенным JS, что свидетельствует о плохой методологии кодирования.
Нет, я имел в виду, что вы знаете, почему люди используют # .
ральф
11
амерулислам:
Нет, я имел в виду, что вы знаете, почему люди используют # .
Да, но не только в демонстрационных целях. Слишком часто это заканчивается в готовом коде по причине, которую я упомянул.
амируислам