打印十个a标签的下标(个人笔记)_getelementsbytagname('div')可以带下标吗-CSDN博客

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

问题描述：创建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>