Как получить элемент по атрибуту href?

Опубликовано: 12 Декабря, 2021

Задача состоит в том, чтобы выбрать элемент <a> по его атрибуту href . Некоторые методы обсуждаются ниже. Здесь мы собираемся использовать JQuery для решения проблемы.
Подход 1:

Используйте селектор JQuery $ ('a [href = link_to_site]') .

Пример 1: В этом примере используется подход, описанный выше.

 <!DOCTYPE HTML>
 < html >
    < head >
        < title >
           Get an element by its href attribute.
        </ title >
         < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
         </ script >
    </ head >
    < body style = "text-align:center;" id = "body" >
        < h1 id = "h1" style = "color:green;" >
            GeeksforGeeks
        </ h1 >
        < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" >
        </ p >
        < a href = " https://www.geeksforgeeks.org " >GeeksforGeeks
        </ a >
        < br >
        < br >
        < button onclick = "gfg_Run()" >
            Click here
        </ button >
        < p id = "GFG_DOWN" style = "font-size: 23px;
           font-weight: bold; color: green; ">
        </ p >
        < script >
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML =
            "Click on the button to select the element by HREF attribute.";
            function gfg_Run() {
                el_down.innerHTML =
                       $('a[href=" https://www.geeksforgeeks.org "]').text();
            }
        </ script >
    </ body >
 </ html > 

Выход:

Перед нажатием на кнопку:
После нажатия на кнопку:

Подход 2:

Используйте селектор JQuery $ ('a [href * = part_of_link]') . он выберет элемент, если какая-либо часть атрибута соответствует значению.

Пример 2: В этом примере используется подход, описанный выше.

 <!DOCTYPE HTML>
 < html >
    < head >
        < title >
           Get an element by its href attribute.
        </ title >
         < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
         </ script >
    </ head >
    < body style = "text-align:center;" id = "body" >
        < h1 id = "h1" style = "color:green;" >
            GeeksForGeeks
        </ h1 >
        < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" >
        </ p >
        < a href = " https://www.geeksforgeeks.org " > GeeksforGeeks
        </ a >
        < br >
        < br >
        < button onclick = "gfg_Run()" >
            Click here
        </ button >
        < p id = "GFG_DOWN" style = "font-size: 23px;
           font-weight: bold; color: green; ">
        </ p >
        < script >
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML =
            "Click on the button to select the element by HREF attribute.";
            function gfg_Run() {
                el_down.innerHTML = $('a[href*="geeks.org"]').text();
            }
        </ script >
    </ body >
 </ html > 

Выход:

Перед нажатием на кнопку:
После нажатия на кнопку:

JavaScript Вопросы о Web технологиях JavaScript-Misc

Как получить элемент по атрибуту href?

РЕКОМЕНДУЕМЫЕ СТАТЬИ