打印十个a标签的下标(个人笔记)

最新推荐文章于 2024-05-17 13:52:13 发布

水盒子

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量261

点赞数 1

分类专栏：高频code 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43527608/article/details/115448484

版权

高频code 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题描述：创建10个a标签，点击每个弹出对应的序号。
笨方法：写十个a标签，监听获取目标值的innerHTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
  </head>
  <body>
    <div>
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
      <a href="">5</a>
      <a href="">6</a>
      <a href="">7</a>
      <a href="">8</a>
      <a href="">9</a>
      <a href="">10</a>
    </div>
    <script>
      var btn = document.getElementsByTagName('div')[0];
      btn.addEventListener('click', function(e) {
          e.preventDefault();
          // console.log(e.target); //返回具体a元素
          // console.log(e.currentTarget); //返回整个div元素，包括所有的a元素
          console.log(e.target.innerHTML)
      })
  
    </script>
  </body>
</html>

1、不要忘记使用e.preventDefault()来阻止a标签的默认行为，不然会默认跳转，导致控制台输出结果闪退

2、要记得getElementsByTagName返回的是一个集合，即使只有一个元素，也要加上明确的下标[0]。而addEventListener()用于像指定元素添加事件句柄。

9月8日更新
上周字节面试，被面试官指出了问题，当div这个父盒子有宽高后，如果点击了空白的地方会怎么样？
结果：输出div的全部子元素

针对该问题，先判断触发元素是谁再输出innerHTML的内容，如下

<script>
      var btn = document.getElementsByTagName('div')[0];
      btn.addEventListener('click', function(e) {
          e.preventDefault();
          // console.log(e.target); //返回具体a元素
          // console.log(e.currentTarget); //返回整个div元素，包括所有的a元素
          if (e.target.nodeName == 'A') {
            console.log(e.target.innerHTML)
          }
      })
    </script>

注意：nodeName节点的值是大写的标签名

console.dir(e.target);

在这里插入图片描述

水盒子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打印十个a标签的下标(个人笔记)

问题描述：创建10个a标签，点击每个弹出对应的序号。笨方法：写十个a标签，监听获取目标值的innerHTML<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content=.
复制链接

扫一扫