![跨平台移动APP设计及应用](https://wfqqreader-1252317822.image.myqcloud.com/cover/442/26179442/b_26179442.jpg)
上QQ阅读APP看书,第一时间看更新
2.3.5 JavaScript操作HTML DOM对象
1.HTML DOM对象
一个HTML网页文档可以表示为枝状结构的DOM模型(Document Object Model,文档对象模型),一个HTML网页的DOM结构如图2.18所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00040002.jpg?sign=1739322953-51PIWE74B9LpIrA03mDjGXr4wDtx49KQ-0-6ccf801e1c4d06807f8d396f64f389b3)
图2.18 HTML页面的文档对象模型
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】 获取网页文档元素的标签。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00041001.jpg?sign=1739322953-vd6OVMEbJhih8UdHVe97dK41bGJ0QQUP-0-c8969f954d8a2a390bc34fe01caf13f5)
程序运行结果如图2.19所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00041002.jpg?sign=1739322953-AwQEODwgzPRPoOSSS4Nq00JwDEK3aBiq-0-d7bdaf186bfa2de1e037afe07d0a29ca)
图2.19 获得网页文档元素的标签
3.获取元素内容
在获取到指定的网页文档元素后,使用innerHTML属性可以得到该元素的内容。
【例2-22】 获取网页文档元素的内容。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00042001.jpg?sign=1739322953-sRxXXSmNLDvAcoNE5E3WCGxAw7Bd6ylK-0-901b424483c821f79d028072f4a17945)
程序运行结果如图2.20所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00042002.jpg?sign=1739322953-P1fp4RXhGmhfdc3BkrH0EuIjZgBZpHrE-0-1e6d98288b6696372e1cdca9b9aca9c0)
图2.20 获得网页文档元素的内容
4.更改元素内容
在获取到指定的网页文档元素后,还可以使用innerHTML属性更改该元素的内容。
【例2-23】 更改网页文档元素的内容。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00042003.jpg?sign=1739322953-K0p0LyWAu0QmsvQKlKuTZE1wcLZvq3JB-0-e1716f279989313f874d5234131cc0ae)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00043001.jpg?sign=1739322953-ESeM9CoF3rXFJ1qmxbAU8fKTx9V0EJKv-0-b91d86b21398f5677dc25b815b3b2142)
程序运行结果如图2.21所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00043002.jpg?sign=1739322953-BpsXvOTCgqYsd79ztLEwDb1smznxD6Gf-0-e7426816a644a0a068433e0f6956a970)
图2.21 更改网页文档元素的内容