2.3.5　JavaScript操作HTML DOM对象

1.HTML DOM对象

一个HTML网页文档可以表示为枝状结构的DOM模型（Document Object Model，文档对象模型），一个HTML网页的DOM结构如图2.18所示。

HTML DOM对象定义了一些操作HTML文档元素的方法和属性，JavaScript通过DOM对象的方法操作HTML网页中的DOM对象。DOM对象就是HTML网页中的元素，因此，应用JavaScrit可以通过DOM对HTML网页中的元素进行操作。

2.使用id属性获取元素节点

HMTL文档中的id属性是HTML元素的唯一标识，JavaScript使用getElementById（）方法可以获取到指定的元素。

例如，设在HTML文档中有下列元素

＜div id="t1"＞Div#1＜/div＞

则

var x=document.getElementById（"t1"）；

变量x获取到由id="t1"所指定的元素＜div＞。

在获取到指定的网页文档元素后，使用nodeName属性可以得到该元素的标签。

【例2-21】　获取网页文档元素的标签。

程序运行结果如图2.19所示。

3.获取元素内容

在获取到指定的网页文档元素后，使用innerHTML属性可以得到该元素的内容。

【例2-22】　获取网页文档元素的内容。

程序运行结果如图2.20所示。

4.更改元素内容

在获取到指定的网页文档元素后，还可以使用innerHTML属性更改该元素的内容。

【例2-23】　更改网页文档元素的内容。

程序运行结果如图2.21所示。