美文网首页
使用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元素

    今天偶然发现,直接使用id就可以引用DOM元素,比如: 那么,可以使用id来引用DOM元素,比如获取input的v...

  • jQuery适用技巧笔记整合

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过ID、CLASS、元素名以及元素的层级关系及dom...

  • jquery常用技巧及常用方法列表集合

    关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者x...

  • ref转发到DOM元素

    Vue 为DOM元素添加ref属性 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件...

  • 移动端性能优化(4)

    脚本类 尽量使用id选择器 选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。 合理缓存DOM对象 ...

  • 移动端性能优化(4)

    脚本类尽量使用id选择器选择页面DOM元素时尽量使用id选择器,因为id选择器速度最快。 合理缓存DOM对象对于需...

  • vue中ref($refs)的用法

    官网概念: 解读: 用途:ref相当于给元素或组件赋予一个ID引用,用来注册引用信息的,方便获取dom元素或获取组...

  • 原生js学习-----javascript DOM 操作

    1. 创建dom元素 2. 获取dom元素 getElementById("id"),如果id在元素中不是唯一的,...

  • JS事件

    DOM DOM查询 通过domcument对象获取元素节点:getElementById("id"):通过id属性...

  • 原生JS的常用API

    Dom相关: 选中dom元素: 给dom元素增添id,则该id就是JS的全局变量(企业开发不适合): portfo...

网友评论

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

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