第三章对象模型DOM和BOM

第三章对象模型DOM和BOM重点：DOM(documentobjectmodel)访问网页元素的方法document对象BOM模型概念几个重要对象(window、history、location)的属性和方法1、DOM获得网页元素(网页文档)知识点：html树形结构document.getElementById()方法document.getElementsByTagName()方法document.getElementsByName()方法①什么是DOM？编程中经常要通过javascript重构整个HTML文档，即可以添加、移除、改变、或重排页面上的项目来实现特效。②HTMLDOM对象根据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、操作练习实现全选、全不选功能。核心代码：scriptlanguage=javascriptfunctiontj(){vargroup=document.getElementsByName(check);//获取所有名为check的控件vartotalprice=0;//定义初始价格for(vari=0;igroup.length;i++)//循环check控件的个数{if(group[i].checked)//ique被选中的控件totalprice+=parseFloat(group[i].value);//累加值}alert(您的购物总价为+totalprice+元);}functioncheckAll(){vargroup=document.getElementsByName(check);//获取所有名为check的控件varflag=document.getElementById(checkshop).checked;//全选控件for(vari=0;igroup.length;i++)//一旦用户点击全选，则遍历所有check控件group[i].checked=flag;//group[i].checked=checked}/script2、DOM的document对象知识点：使用漂浮层用document.getelementById()获得层获得网页元素的坐标window.onscroll事件①document对象编程表3-1Document对象常用属性属性说明bgColor设置或检索document对象的背景色title设置文档标题，等价于HTML的title标记fgColor设置前景色(文本颜色)linkColor未单击过的链接颜色alinkColor激活链接(焦点在此链接上)的颜色vlinkColor已单击过的链接颜色表3-2document对象的常用方法1）document对象的引用通过集合引用Document.images//对应页面上的img标记Document.images.length//对应页方法说明getElementById()根据HTML元素指定的ID，获得唯一的HTML元素，如访问div层对象、图片Img对象getElementsByName()根据HTML元素指定的name，获得相同名称的一组元素，如访问表单元素(全选功能)createElement(Tag)创建一个html标记对象body.appendChild(oTag)在元素内添加新元素面上的img标记的个数Document.images[0]//第1个img标记Document.images[i]//第i+1个img标记通过name属性直接引用imgname=”oImage”Document.images.oImage//Document.images.name属性②常见页面坐标介绍表3-3常见的页面坐标top指定元素的上边界位置pixelTop设置或返回元素的上边界pixelLeft指定元素的左边界位置scrollTop页面滚动的高度例：获得元素X的上边界和左边界的像素值，X.style.pixelTopX.style.pixelLeft案例：3.2.3操作练习：悬浮广告3.2.4操作练习：图片切换特效3.2.4-2：添加记录3.2.4-3：自动测试HTML文档的特效3、BOM的window对象知识点：浏览器对象概念Window对象基本概念resizeTo（）方法resizeBy（）方法setTimeout（）方法获得屏幕大小①BOM是什么BrowserObjectModel即浏览器对象模型，它允许访问和操控浏览器窗口。研发者通过使用BOM，可移动窗口、更改状态栏文本或执行其它不与页面内容发生直接联系的操作。浏览器特有的JavaScript扩展都被认为是BOM的一部分。②浏览器对象浏览器对象是一个分层结构BOM模型见书62页③：window对象编程1）表3-4window对象常用属性属性说明status指定浏览器状态栏中显示的临时信息screen有关客户端的屏幕和显示性能的信息history有关客户访问过的URL的信息location有关当前URL的信息document表示浏览器窗口中的HTM文档parent表示当前窗口的父窗口self当前window对象的代名词2）表3-5window对象常用方法方法说明Alert（“提示信息”）显示一个带有提示信息和“确定”按钮的对话框Confirm（“提示信息”）显示一个带有提示信息以及确定和“取消”按钮的对话框Prompt（“提示信息”）显示可提示用户输入的对话框Open（“url”，“name”）打开具有指定名称的新窗口，并加载给定url所指定的文档，如果没有提供url，则打开一个空白文档Close（）关闭当前窗口resizeTo（height，width）设定窗口的大小moveTo（X,Y）设置窗口的左上角位置resizeBy（w，h）窗口宽增大w，高增大hShowModalDialog（）在一个模式窗口中显示指定的HTML文档setTimeout（“函数”，毫秒）设置定时器：经过指定毫秒值后执行某个函数Scroll（）窗口滚动3）表3-6Window对象常用事件事件说明onload当在窗口或框架完成文档加载时触发onresize当对象的大小将要改变时触发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”ornumber）加载列表中的一个url，或者要求浏览器移动指定的页面数Back（）方法相当于“后退按钮”；Forwad（）方法相当于“前进”按钮Go（1）代表前进一页，等价于forwad方法，go（-1）代表后退一页，等价于back（）方法2）Location对象表3-8location常用属性属性说明host设置或检索位置或url的主机名和端口号hostname设置或检索位置或url的主机名部分href设置或检索完整的url字符表3-9Location常用方法方法说明Assign（“url”）加载url指定的新的HTML文档Reload（）重新加载当前页Replace（“url”）通过加载url指定的文档来替换当前文档案例3.4.1列表菜单3.4.2实现图片轮流变大onload事件3.4.3实现弹窗模式窗口3.4.4页面左边随滚动条滚动的带有关闭按钮的漂浮广告（学生做）3.4.5全需要和全部需要的特效