zoukankan      html  css  js  c++  java
  • 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,在一些浏览器控制台中使用此方法时,会得到浏览器的警告。

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

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

  • 相关阅读:
    ZJOI2019二轮游记
    Luogu P5284 [十二省联考2019]字符串问题
    Luogu P5309 [Ynoi2012]D1T1
    Luogu P5292 [HNOI2019]校园旅行
    LOJ #6052. 「雅礼集训 2017 Day11」DIV
    Luogu P5279 [ZJOI2019]麻将
    LOJ #6060. 「2017 山东一轮集训 Day1 / SDWC2018 Day1」Set
    Luogu P5283 [十二省联考2019]异或粽子
    Luogu P5290 [十二省联考2019]春节十二响
    Luogu P5285 [十二省联考2019]骗分过样例
  • 原文地址:https://www.cnblogs.com/daysme/p/6273562.html
Copyright © 2011-2022 走看看