• js中可以直接使用id而不用获取id


    先来看一个例子:

    不获取 id 也可以使用 id 元素。

    <!--
    Author: XiaoWen
    Create a file: 2017-01-11 13:58:01
    Last modified: 2017-01-11 14:00:28
    Start to work:
    Finish the work:
    Other information:
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <div id="box">小文你好</div>
    </body>
    <script>
      console.log(box.innerText) //小文你好
      //上面的 box 并没有使用 var box=document.getElementById('box') 来首先获得元素
    </script>
    </html>

    其实,不只是 id 可以这样, name 也是可以的。

    再来一个例子:

    不获取 name 也可以使用 name 元素。

    <!--
    Author: XiaoWen
    Create a file: 2017-01-11 13:58:01
    Last modified: 2017-01-11 14:18:43
    Start to work:
    Finish the work:
    Other information:
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <div id="mydiv">小文你好</div>
      <img name="mypic" src="" alt="">
      <form name="myform" action=""></form>
      <a name="mya" href="http://www.baidu.com">a1</a>
    </body>
    <script>
      console.log(mydiv)
      console.log(mypic)
      console.log(myform)
      console.log(mya) //*
    </script>
    </html>

    为什么可以不获取,h5是这么说的

    HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

    • 如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
    • 如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.

    实用性如何

    实际测试了下,上面所说的a标签不能直接使用 name 获得,但img可以。

    所以,不好意思,即使是id,在实际项目中并不建议使用

    可以临时用来做做代码调试,懒得去 document.get... 也是可以的。就像 xpath 或 ff 的元素零时变量。

    为什么不建议,即使是id,在一些浏览器控制台中使用此方法时,会得到浏览器的警告。

    为什么要听浏览器的?我觉得浏览器很厉害。大牛的结晶,大牛的建议,听一下还是可以的。

    当然,更深层或更官方的原因,还望有高人告知。

  • 相关阅读:
    中心极限定理
    BCEloss和交叉熵损失的区别
    postgresql的python接口
    DataGrip 2020.1 安装与激活方法
    区块链技术
    TensorRT推理加速推断并提高吞吐量
    纯视觉取代slam做路径规划及避障的思路
    DL重新回顾总结
    OpenCV 轮廓方向
    OpenCV 低通滤波(可设置频率)
  • 原文地址:https://www.cnblogs.com/daysme/p/6273562.html
Copyright © 2020-2023  润新知