第三章对象模型DOM和BOM

1、第三章 对象模型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 对象

2、根据DOM，html文档中的每个成分都是一个分节点。DOM规定：整个文档是一个文档节点每个html标记是一个元素节点包含在html元素中的文本是文本节点每一个html属性是属性节点注释属于注释节点(节点彼此之间有等级关系)-节点树见书49页-注：节点彼此间都存在关系。除了文档节点之外的每个节点都有父节点;每个元素节点都有子节点;当节点分享同一个父节点时，他们就是同辈(同级节点);节点也可以拥有后代，后代指某个节点的多有子节点，或者这些子节点的子节点，以此类推;节点也可以拥有先辈，先辈是某个节点的父节点，或者是父节点的父节点，,以此类推。根节点有两种特殊的文档属性可以来访问根节点html节点do

3、cument.documentElement 可返回存在于html文档中的文档根节点document.body 对html页面的特殊扩展，可以直接访问body标记案例：3-1根节点.htmlparentNode、firstChild、以及lastChild遵循文档结构，在文档中进行“短距离的旅行”案例：3-1parentNode.htmldocument.getElementById()方法：通过指定ID来返回元素查找整个html文档中的任何html元素。该方法会忽略文档的结构而返回正确的元素，不论它被隐藏在文档中的任何位置。案例：3-1getElementById方法.htmldocumen

4、t.getElementByTagName()方法：返回控件列表，要对列表中具体的控件访问的时候还需要使用循环来逐个访问语法：document.getElementByTagName(标记名称)或 document.getElementById(id名称).getElementByTagName(标记名称)案例：3-1getElementByTagName.htmlgetElementByName()方法：依靠名字name属性作为特征来获取同名的控件列表1-2、操作练习实现全选、全不选功能。核心代码：function tj()var group=document.getElementsByNa

5、me(check);/获取所有名为check的控件var totalprice=0;/定义初始价格for(var i=0;igroup.length;i+)/循环check控件的个数if(groupi.checked)/ique被选中的控件totalprice+=parseFloat(groupi.value);/累加值alert(您的购物总价为+totalprice+元);function checkAll()var group=document.getElementsByName(check);/获取所有名为check的控件var flag=document.getElementById(

6、checkshop).checked;/全选控件for(var i=0;igroup.length;i+)/一旦用户点击全选，则遍历所有check控件groupi.checked=flag;/groupi.checked=checked2、DOM 的 document 对象知识点：使用漂浮层用document.getelementById()获得层获得网页元素的坐标window.onscroll事件document对象编程表3-1 Document对象常用属性属性说明bgColor设置或检索document对象的背景色title设置文档标题，等价于HTML的标记fgColor设置前景色(文本颜

7、色)linkColor未单击过的链接颜色alinkColor激活链接(焦点在此链接上)的颜色vlinkColor已单击过的链接颜色表3-2 document 对象的常用方法方法说明getElementById()根据HTML元素指定的ID，获得唯一的HTML元素，如访问div层对象、图片Img对象getElementsByName()根据HTML元素指定的name，获得相同名称的一组元素，如访问表单元素(全选功能)createElement(Tag)创建一个html标记对象body.appendChild(o Tag)在元素内添加新元素1） document对象的引用l 通过集合引用Docum

8、ent.images/对应页面上的标记Document.images.length /对应页面上的标记的个数Document.images0/第1个标记Document.images i/第i+1个标记l 通过name属性直接引用Document.images.oImage/D属性常见页面坐标介绍表3-3常见的页面坐标top指定元素的上边界位置pixelTop设置或返回元素的上边界pixelLeft指定元素的左边界位置scrollTop页面滚动的高度例：获得元素X的上边界和左边界的像素值，X.style.pixelTop X.style.pixelLeft

9、案例：3.2.3操作练习：悬浮广告3.2.4操作练习：图片切换特效3.2.4-2：添加记录3.2.4-3：自动测试HTML文档的特效3、 BOM的window 对象知识点：浏览器对象概念Window 对象基本概念resizeTo（）方法resizeBy（）方法setTimeout（）方法获得屏幕大小BOM是什么Browser Object Model即浏览器对象模型，它允许访问和操控浏览器窗口。研发者通过使用BOM，可移动窗口、更改状态栏文本或执行其它不与页面内容发生直接联系的操作。浏览器特有的JavaScript扩展都被认为是BOM的一部分。浏览器对象浏览器对象是一个分层结构BOM模型见书6

10、2页：window对象编程1）表3-4 window对象常用属性属性说明status指定浏览器状态栏中显示的临时信息screen有关客户端的屏幕和显示性能的信息history有关客户访问过的URL的信息location有关当前URL的信息document表示浏览器窗口中的HTM文档parent表示当前窗口的父窗口self当前window对象的代名词2） 表3-5window对象常用方法方法说明Alert（“提示信息”）显示一个带有提示信息和“确定”按钮的对话框Confirm（“提示信息”）显示一个带有提示信息以及确定和“取消”按钮的对话框Prompt（“提示信息”）显示可提示用户输入的对话框O

11、pen（“url”，“name”）打开具有指定名称的新窗口，并加载给定url所指定的文档，如果没有提供url，则打开一个空白文档Close（）关闭当前窗口resizeTo（height，width）设定窗口的大小moveTo（X,Y）设置窗口的左上角位置resizeBy（w，h）窗口宽增大w，高增大hShowModalDialog（）在一个模式窗口中显示指定的HTML文档setTimeout（“函数”，毫秒）设置定时器：经过指定毫秒值后执行某个函数Scroll（）窗口滚动3） 表3-6 Window对象常用事件事件说明onload当在窗口或框架完成文档加载时触发onresize当对象的大小将要

12、改变时触发onscroll当用户滚动对象的滚动条时触发案例：3.3.1 广告窗口3.3.2定时打开新的窗口3.3.3点开一个逐渐变大的新网页3.3.4单击图片时图片跳动3.3.5自动滚动的页面4、 BOM的history 和location 对象实现由返回、前进、刷新功能的页面知识点：History对象Location 对象history对象1） 表3-7History常用方法方法说明Back（）加载history列表中的上一个URLForwad（）加载history列表中的下一个urlGo（“url”or number）加载列表中的一个url，或者要求浏览器移动指定的页面数Back（）方法相当于“后退按钮”；Forwad（）方法相当于“前进”按钮Go（1）代表前进一页，等价于forwad方法，go（-1）代表后退一页，等价于back（）方法2） Location对象表3-8 location常用属性属性说明host设置或检索位置或url的主机名和端口号hostname设置或检索位置或url的主机名部分href设置或检索完整的url字符表3-9