JS--如何获取a标签的url

最新推荐文章于 2024-06-28 10:22:53 发布

ldl0554

最新推荐文章于 2024-06-28 10:22:53 发布

阅读量2.6k

点赞数

分类专栏： js 文章标签： javascript

原文链接：https://blog.csdn.net/qq_36090423/article/details/82154251?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7.not_use_machine_le

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

可以自己拓展一下

<!--如何获取a标签的url
本篇内容涉及到的知识点：
1 js的for循环
2 document获取标签
首先网页是这个样子的，我们要获取a标签的网址及文字描述
1发现网址在  body>ul>li>a中，
2 通过 document.getElementById("ad") 获取ul的标签里的内容
3 通过 a1.getElementsByTagName("li") 获取li的标签内容
4  此时得到的li是一个数组，
5  a标签位于第一个li中，就是li数组的第一个。
6  同样方法通过  getElementsByTagName("a") 获取 a的标签内容
7  最后网址是循环  通过 .href 获取， 网页文字是通过 .innerHTML获取
具体代码如下：
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句控制--获取url</title>
    <script type="text/javascript">
        window.onload = function () {   /*先加载body内容，在执行js内容，必须加上window.onload()*/
              var a1 = document.getElementById("ad");       /*通过父标签id获取ul标签内容*/
              var a2 = a1.getElementsByTagName("li");      /* 通过子标签获取li标签里的内容*/
              var a3 = a2[0].getElementsByTagName("a");    /*通过获取数组的第一个元素也就是第一个li的a 标签*/
              document.write('<br />'+ '这是a标签的个数'+a3.length);
              document.write('<br />'+ '这是url：');
              for(var i = 0; i<a3.length; i++)  /*这是一个for循环*/
              {
                  /*下面这句 innerHTML是获取标签之间的文字的，在网页显示的内容*/
                document.write('<br />'+ '这是每个a标签里的东西'+ '<br />'+ a3[i].innerHTML ); 
                document.write('<br />'+ '这是每个a标签里的网址'+ a3[i].href);  /*这个是每个a标签中的网址*/
                document.write( '<br />'+ a3[i].innerHTML + ":" +  a3[i].href ); /* 这个是组合的形式*/
              }
 
        }
    </script>
</head>
<body>
<!--这是网页内容，获取的是 body>ul>li>a的网址-->
<ul id = "ad">
    <li>
        <a href="https://www.baidu.com">百度</a>
        <a href="https://www.sina.com.cn/">新浪</a>
        <a href="http://www.qq.com/">腾讯</a>
        1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</body>
</html>

ldl0554

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS--如何获取a标签的url

可以自己拓展一下<!--如何获取a标签的url本篇内容涉及到的知识点：1 js的for循环2 document获取标签首先网页是这个样子的，我们要获取a标签的网址及文字描述1发现网址在 body>ul>li>a中，2 通过 document.getElementById("ad") 获取ul的标签里的内容3 通过 a1.getElementsByTagName("li") 获取li的标签内容4 此时得到的li是一个数组，5 a标签位于第一个li中，就是li数
复制链接

扫一扫

专栏目录