美文网首页
使用id引用DOM元素

使用id引用DOM元素

作者: 7天苹果 | 来源:发表于2017-08-14 20:55 被阅读42次

    今天偶然发现,直接使用id就可以引用DOM元素,比如:

    <body>
      <section>
         姓名:<input id="input" value="lipeishang"/>
      </section>
    </body>
    

    那么,可以使用id来引用DOM元素,比如获取input的value值:

    <script>
        console.log(input.value);            //"lipeishang"
    </script>
    

    那么你可能会问了,既然可以直接使用id来引用DOM元素,那document.getElementById()方法还有存在的意义么?

    答案当然是需要。

    原因是:如果页面上出现与id同名的变量, 则该变量代表的就是js的变量值, 而不指向html中的元素。

    测试一下:

    <head>
        <script>
              var input = {value:"mac"};
              console.log(input.value);        //"mac"
        </script>
    </head>
    <body>
      <section>
         姓名:<input id="input" value="lipeishang"/>
      </section>
    </body>
    
    

    所以尽量不建议id直接去引用DOM元素。

    相关文章

      网友评论

          本文标题:使用id引用DOM元素

          本文链接:https://www.haomeiwen.com/subject/xfrprxtx.html