DOM:拥有用JS脚本动态修改HTML
DOM模型
---------------------------------------------------------
HTML文档只有一个根节点,其他都是子节点,最终形成一个结构化文档。DOM提供了访问结构化文档的一种方式,但DOM不是一种技术,它只是访问结构化文档的一种思想。基于这种思想,各种语言都有自己的DOM解析器。
DOM模型和HTML文档
---------------------------------------------------------
虽然JS不是一门纯粹的面向对象语言,但是DOM为常用HTML元素找到了一套完整的继承体系。
HTML元素之间常见的包含关系。有些HTML元素之间可以互相嵌套,有些不可。
访问HTML元素
---------------------------------------------------------
两种方式:根据ID访问HTML元素(document.getElementById()),利用节点关系访问HTML元素(利用父子,兄弟关系来访问)
访问表单控件
访问列表框、下拉菜单的选项
修改HTML元素
---------------------------------------------------------
修改节点(内容,属性,CSS样式)。修改HTML元素通常通过修改如下几个常用属性:
innerHTML: 如xx.innerHTML=document.getElementById("celVal").value;
value:
className:
style:
options[index]:
增加HTML元素
---------------------------------------------------------
两步:1)创建/复制节点;2)添加节点
var a=document.createElement("divxxx");
var ajax=ul.firstChild.nextSibling.cloneNode(false)
ul.insertBefore(ajax,ul.firstChild);
动态添加表格内容
删除HTML元素
---------------------------------------------------------
删除节点:removeChild
传统DHTML模型
---------------------------------------------------------
通过DOM不仅能访问和更新页面内容及结构,还能操纵文档的风格样式。在DOM出现前,JS采用传统DHTML模型访问和更新HTML页面。相比DHTML,DOM功能更强大,提供了对整个HTML文档的访问模型,其将文档转换为Tree结构,树上每个节点对应HTML元素。
使用window对象
---------------------------------------------------------
window对象是整个JS脚本运行的顶层对象。
访问历史:history属性。
访问页面URL:
客户机屏幕信息:screen属性
弹出新窗口:window.open()
用定时器:
navigator和地理位置:比如
for(var propname in window.navigator)
{
window.navigator[propname];
}
HTML5新增的geolocation属性:getCurrentPosition,watchCurrentPosition
使用document对象
---------------------------------------------------------
document对象既是HTMLDocument类的一个实例,也是DHTML模型中的一个对象。