根据id获取元素 - 前端学习教程_ 前端_前端开发

getElementById()方法是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null。需要注意的是，JavaScript中严格区分大小写，所以在书写时一定要遵守书写规范，否则程序会报错。

下面通过代码演示document.getElementById('id')方法的使用，示例代码如下。

 1  <body>

 2   <div id="box">你好</div>

 3   <script>

 4    var Obox = document.getElementById('box');

 5    console.log(Obox);       // 结果为：<div id="box">你好</div>

 6    console.log(typeof Obox);   // 结果为：object

 7    console.dir(Obox);       // 结果为：div#box

 8   </script>

 9  </body>

上述代码中，在第2行定义了一个<div>标签，由于文档是从上往下加载的，所以第3~8行的<script>标签和JavaScript代码要写在第2行代码的下面，这样才可以正确获取到div元素。第4行代码用于获取HTML中id为box的元素，并赋值给变量Obox。需要注意的是，id值不能像CSS那样加“#”，如getElementById("#box")是错误的。第7行的console.dir()方法用来在控制台中查看对象的属性和方法。