DOM编程

第2章DOM编程内容回顾JavaScript是一种基于对象和事件驱动的脚本语言，它提供了一些专有的类、对象及函数JavaScript的基本数据类型包括Number、Boolean、Null、StringparseInt用来将字符串转换成整型数，parseFloat用来将字符串转换成浮点数常用事件有onload、onclick、onmouseover、onmouseout、onchange等本章内容浏览器对象模型文档对象模型（DOM）本章目标理解浏览器对象模型熟练掌握window对象的常用属性和方法理解文档对象模型熟练掌握document对象访问页面元素使用文档对象模型访问节点1.浏览器对象模型浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构浏览器对象模型对象常用属性名称描述dialogArguments设置或获取传递给模式对话框窗口的变量或变量数组status设置或获取位于窗口底部状态栏的信息screen包含关于客户屏幕和渲染能力的信息history包含了用户已浏览的URL的信息location包含关于当前URL的信息document代表给定浏览器窗口中的HTML文档event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态window对象scriptlanguage=javascriptfunctioncheckScreen(){varwidth=window.screen.width;varheight=window.screen.height;if(width1024||height768){alert(为保证浏览效果，\n请调整你的分辨率大小);}}/script示例演示window对象scriptlanguage=javascriptfunctioncaptureMousePosition(){varx=window.event.x;vary=window.event.y;window.status=X:+x+,Y:+y;}document.onmousemove=captureMousePosition;functioncaptureEvent(){varsrcObj=window.event.srcElement;alert(你点击的页面元素类型是:+srcObj.type);}/script示例演示window对象常用方法名称描述alert显示自定义消息的对话框confirm显示确认对话框prompt显示输入对话框showModalDialog创建模式对话框setTimeout经过指定毫秒值后计算表达式open打开新窗口并装入给定URL的文档close关闭当前浏览器窗口window对象scriptlanguage=javascriptfunctiontakeMoney(){varmoney=prompt(请输入取款金额,100);varstate=confirm(你取款金额为+money);if(!state){alert(请重新取款);}else{alert(操作进行中...);}}takeMoney();/script示例演示window对象window.open([URL][,Name][,Features])URL指打开窗口后加载的文档地址，Name指窗口名称，Features指窗口特征如何制作在页面加载时自动打开一个广告窗口的页面特效？窗口的特征如下：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；window对象scriptlanguage=javascriptfunctionopenWin(){window.open(adv.html,,toolbars=0,location=0,statusbars=0,menubars=0,width=736,height=474,scrollbars=0);}/script示例演示bodyonload=openWin()imgsrc=images/index.png//body在窗体加载时调用window对象如何实现淘宝网宝贝交易时间的更新？使用setTimeout()方法每隔1秒钟更新一次交易时间setTimeout（“调用的函数”,”毫秒数”）window对象scriptlanguage=javascriptfunctionshowTime(){varnow=newDate();varhour=now.getHours();varminute=now.getMinutes();varsecond=now.getSeconds();vartime=document.getElementById(time);time.innerHTML=系统当前时间是：+hour+:+minute+:+second;//定义计时器，每隔1秒调用一次showTime方法setTimeout(showTime(),1000);}/script示例演示bodyonload=showTime()divid=time/div/body1.2history对象history对象用来管理当前窗口最近访问过的URL常用方法：名称描述forward从访问记录列表中装入下一个URL，相当于浏览器的前进功能back从访问记录列表中装入前一个URL。相当于浏览器的后退功能go(number/url)从访问记录列表中装入URLhistory.go(-1)相当于history.backhistory.go(1)相当于history.forwardhistory对象bodyahref=javascript:history.back()后退/aahref=javascript:history.forward()前进/a/body示例演示1.3location对象location对象用来管理当前打开窗口的URL信息常用属性和方法：名称描述href属性设置或获取整个URL为字符串replace(URL)方法装入指定URL的另外文档来替换当前文档reload()方法重新装入当前页面location对象scriptlanguage=javascriptfunctionchangeLocation(){varurl=document.all.site.value;//改变当前浏览器窗口的地址栏urlwindow.location.href=url;}/script示例演示selectonchange=changeLocation()name=siteoptionvalue=百度/optionoptionvalue=网易/optionoptionvalue=淘宝/optionoptionvalue=雅虎/option/select当列表的值发生变化时2.文档对象模型2.1DOM概述DOM－DocumentObjectModel，它是W3C国际组织的一套Web标准DOM是一种与浏览器、平台、语言无关的接口2.2document对象document对象代表浏览器窗口中加载的整个HTML文档常用属性名称描述bgColor页面的背景颜色documentElement获取对文档根结点的引用body文档主体的开始和结束。title设置或获取页面的标题document对象scriptlanguage=javascriptvarnow=newDate();varhour=now.getHours();if(hour12){document.bgColor=#999900;}else{document.bgColor=#33CC99;}/script示例演示获取系统当前时间document对象常用方法名称描述write用于向HTML文档中动态写入内容createElement创建代表某个HTML元素的对象getElementById获取指定ID的HTML页面元素对象getElementsByName获取一组指定name的HTML页面元素对象getElementsByTagName返回所有指定标签名的HTML页面元素对象document对象document对象访问页面元素的常用方式有四种document.all.页面元素名称;document.表单名.元素名称;document.getElementById(ID名称);document.getElementsByName(元素名称);all：表示文档中所有元素的集合document对象scriptlanguage=javascriptfunctionmove(){document.getElementById(adv).style.top=400+document.documentElement.scrollTop+px;}window.onscroll=move;/script示例演示获取窗口滚动的位置document对象scriptlanguage=”javascript”functionsetSate(state){varproducts=document.getElementsByName(“product”);for(vari=0;iproducts.length;i++){products[i].checked=state;}}/script示例演示获取名称相同的一组元素设置复选框的选中状态2.3节点信息XMLDOM把XMLDOM文档视为一棵节点树(node-tree)树中的所有节点彼此之间都有关系bookstorebookcategory=cookingtitlelang=enEverydayItalian/titleauthorGiadaDeLaurentiis/authoryear2005/yearprice30.00/price/book…/bookstore节点信息常用节点属性名称描述childNodes当前节点的所有子节点firstChild当前节点的所有子节点中第一个节点lastChild当前节点的所有子节点中最后一个节点parentNode当前节点的父节点nodeValue节点值nodeName节点的名称nodeType节点的类型常用节点类型类型值描述元素节点1HTML标签属性节点2HTML标签中的属性文本节点3文本信息节点信息scriptlanguage=javascriptfunctiontest(){alert(document.body.firstChild.nodeType);alert(document.body.firstChild.nodeValue);alert(document.body.lastChild.nodeType);alert(document.body.lastChild.nodeValue);}/script示例演示bodyonLoa