认识 HTML DOM
【认识 HTML DOM】JavaScript 除了数据型态的对象 (object) 有 Boolean 、 Number 、 Sring 外，内建对象还有 Array 、 Math 、 Date 、 RegExp。
除了内建的对象外，浏览器 (broswer) 另外会建置文建对象模型，也就是 HTML DOM ，这可让我们可以把 HTML 的元素都当成对象来操作。 HTML DOM 主要有以下这几个
- document
- element
- event
- window
我们之前用 document 的 write() 将字符串 (string) 写到浏览器中，当然， document 不只是可以做这些事情，几乎所有跟 HTML 文件有关的都可以用 document ，例如下面的 HTML 文件，我们在 <script> 标签中设计一个 run() 函数
<html><head><title>docuemnt Demo</title><script>function run() {var d = document.getElementById("display");d.style.color = "red";d.style.fontSize = "x-large";}</script></head><body><divid="display"onclick="run()">something happened</div></body></html>
run() 函数准备运用在 id 属性为 display 的 HTML 元素上，利用 HTML 元素的事件处理属性 onclick 设置执行 run() ，因此点击 <div> 的范围就会执行 run()
<divid="display"onclick="run(this)">something happened</div>
我们仔细来看看 run() 的定义
functionrun() {vard = document.getElementById("display");d.style.color ="red";d.style.fontSize ="x-large";}
首先， run() 的工作是利用 document 的 getElementById() 方法取得 id 属性为 display 的 HTML 元素，这会让变量 d 取得 <div> 的元素对象，也就是上面提到的 element 。接下来便是利用元素对象的 style 属性重新设置文字颜色与字型尺寸。
这例子很简单，我们先开启 documentdemo.html 吧
用鼠标点一下 something happened 的地方，文字颜色与大小就立刻改变了
我们可以看到真正的工作是由元素对象来做的，此例通过 document 取得元素对象，当然我们也可以直接以元素对象当参数 (parameter) 传递给 run() ，例如
<html><head><title>docuemnt Demo</title><script>function run(d) {d.style.color = "red";d.style.fontSize = "x-large";}</script></head><body><divid="display"onclick="run(this)">something happened</div></body></html>
这里在调用 run() 时增加 this 当参数，然后 run() 的定义里增加参数 d ，也删掉 document 的部份，因为参数 d 就直接是元素对象了。
使用 HTML DOM 可以让网页有动态效果，无论是新增或删除 HTML 元素都可由 HTML DOM 来达成，这也是学习 JavaScript 重要的一部份，在我们接下来的部份也有很多地方会用到。
下面我们来想想怎么样制作密码表，先来看看储存密码表的数组 (array) 吧！
| 中英文术语对照 | |
|---|---|
| 对象 | object |
| 浏览器 | broswer |
| 字符串 | string |
| 参数 | parameter |
| 数组 | array |
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-