第三章对象模型DOM和BOM..docVIP

第三章 对象模型DOM和BOM 重点： DOM(document object model)访问网页元素的方法 document对象 BOM模型概念 几个重要对象(window、history、location)的属性和方法 1、DOM获得网页元素(网页文档) 知识点： html树形结构 document.getElementById()方法 document.getElementsByTagName()方法 document.getElementsByName()方法 ①什么是DOM？ 编程中经常要通过javascript重构整个HTML文档，即可以添加、移除、改变、或重排页面上的项目来实现特效。 ②HTML DOM 对象 根据DOM，html文档中的每个成分都是一个分节点。 DOM规定： 整个文档是一个文档节点 每个html标记是一个元素节点 包含在html元素中的文本是文本节点 每一个html属性是属性节点 注释属于注释节点 (节点彼此之间有等级关系) ----节点树见书49页---- 注：节点彼此间都存在关系。除了文档节点之外的每个节点都有父节点;每个元素节点都有子节点;当节点分享同一个父节点时，他们就是同辈(同级节点);节点也可以拥有后代，后代指某个节点的多有子节点，或者这些子节点的子节点，以此类推;节点也可以拥有先辈，先辈是某个节点的父节点，或者是父节点的父节点，,以此类推。 ③根节点 有两种特殊的文档属性可以来访问根节点html节点 document.documentElement 可返回存在于html文档中的文档根节点 document.body 对html页面的特殊扩展，可以直接访问body标记 案例：3-1根节点.html ④parentNode、firstChild、以及lastChild 遵循文档结构，在文档中进行“短距离的旅行” 案例：3-1parentNode.html ⑤document.getElementById()方法：通过指定ID来返回元素 查找整个html文档中的任何html元素。该方法会忽略文档的结构而返回正确的元素，不论它被隐藏在文档中的任何位置。 案例：3-1getElementById方法.html ⑥document.getElementByTagName()方法：返回控件列表，要对列表中具体的控件访问的时候还需要使用循环来逐个访问 语法：document.getElementByTagName(标记名称) 或 document.getElementById(id名称).getElementByTagName(标记名称) 案例：3-1getElementByTagName.html ⑦getElementByName()方法：依靠名字name属性作为特征来获取同名的控件列表 1-2、操作练习 实现全选、全不选功能。 核心代码： script language=javascript function tj() { var group=document.getElementsByName(check);//获取所有名为check的控件 var totalprice=0;//定义初始价格 for(var i=0;igroup.length;i++)//循环check控件的个数 { if(group[i].checked)//ique被选中的控件 totalprice+=parseFloat(group[i].value);//累加值 } alert(您的购物总价为+totalprice+元); } function checkAll() { var group=document.getElementsByName(check);//获取所有名为check的控件 var flag=document.getElementById(checkshop).checked;//全选控件 for(var i=0;igroup.length;i++)//一旦用户点击全选，则遍历所有check控件 group[i].checked=flag;//group[i].checked=checked } /script 2、DOM 的 document 对象 知识点： 使用漂浮层 用document.getelementById()获得层 获得网页元素的坐标 window.onscroll事件 ①document对象编程 表3-1 Document对象常用属性 属性 说明 bgColor 设置或检索document对象的背景色 title 设置文档标题，等价于HTML的title标记 fg