如果要操作某个 HTML 元素，首先要做的事情就是得到这个标签。通俗的说，就是把 HTML 标签“拿到”
JavaScript 里面来。DOM 提供了几个非常实用的得到元素的方法。
getElementById()
document 对象提供 getElementById()方法，可以通过 id 属性来得到某一个 HTML 标签：
document.getElementById("id")
getElementById()方法的名字是驼峰命名法，不难看出这个函数的意义：通过 id 得到标签。
id 属性是任何 HTML 标签都可以添加的属性，一个页面中的任何两个标签绝对不能有相同的 id 属性。正因
如此，使用 document.getElementById()方法得到的元素一定只有 1 个。需要注意的是，id 属性大小写敏感，
即“box1”和“Box1”是两个不同的 id。
我们来看一个案例程序：通过 id 属性得到元素后，更改这个标签内部文本。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//通过 id 得到页面中的元素，保存到 oBox 中
var oBox = document.getElementById("box");
//改变标签内的内容
oBox.innerHTML = "你好，JavaScript！";
</script>
</body>
</html>
程序运行结果如图 8-4 所示，原本是空标签的 div 被 JavaScript 添加了文字。div 标签的 id 属性是“box”，
所以 JavaScript 程序用 document.getElementById("box")得到了它，进而通过设置它的 innerHTML 属性
改变了它的内部文字。
JavaScript 中，HTML 元素一般变量名都以字母 o 开头表示这是一个 HTML 对象，如“oBox”。使用 typeof
检测这个变量，将返回“object”。虽然 oBox 是一个 object 对象，但是这和我们学习的传统 JavaScript 对
象有较大区别：oBox 是一个 HTML 元素，拥有 DOM 提供的多种方法和属性，比如 innerHTML 属性。
如果页面上没有这个指定id的元素，document.getElementById()将返回null，此时打点调用innerHTML
属性程序将会出错，控制台会显示错误，这是因为 null 是不能打点调用任何属性和方法的。
所以编程时一定要确保 HTML 标签中的 id 和 document.getElementById()函数参数的名字是一致的。再
次强调：id 是大小写敏感的，“box1”和“Box1”是两个不同的 id。
编程时要将<script>标签放在<div>标签后面，而不能放在它的前面。这是因为网页从上到下运行，只有
先书写<div>标签，才能保证<script>标签中的 JavaScript 代码执行时已经加载好了<div>标签。可以使用
window.onload 事件来延迟程序的加载，从而可以将程序写在<head>标签内，这也是常见的书写习惯。代码如
下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
//通过 id 得到页面中的元素，保存到 oBox 中
var oBox = document.getElementById("box");
//改变标签内的内容
oBox.innerHTML = "你好，JavaScript！";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
我们将程序写在了<head>标签中并且将所有的代码用 window.onload = function(){}包裹起来，这样可
以使它内部的代码“延迟”到网页完全加载完毕之后才执行。
