第十一章《文档对象》课件.ppt

文档对象;理解文档对象 了解文档对象的属性 掌握文档对象用于获取页面元素的方法 掌握访问页面元素的内容的方法 掌握访问页面元素的样式的方法 掌握访问表单的方法 掌握访问各种表单元素的方法;Document 对象代表整个 HTML 文档，可用来获取文档本身的信息并访问页面中的所有元素。 Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。;属性;!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN html head titleHTML标签生成的网页标题/title script document.title = 由JS脚本生成的网页标题; /script /head body script document.write(document.body.offsetWidth); /script /body /html ;方法;Document对象的方法示例;集合;访问到某个页面元素对象之后，可进一步访问到它的内容和样式。 内容：innerText | innerHTML 样式：style;innerText和innerHTML属性用于获问特定页面元素的内容，包含获取页面元素的内容和更改页面元素的内容。 ;script function test1() { window.alert(document.getElementById(firstp).innerText); window.alert(document.getElementById(firstp).innerHTML); } function test2() { document.getElementById(secondp).innerHTML=用JS脚本在段落元素内创建导航到a href=\\新浪网/a的链接.; } /script …… p id=firstp这是一个段落,里面包含导航到a href=新浪网/a的超链接/p input type=button name=btn value=访问页面元素 onclick=test1();/ p id=secondp这是一个段落。/p input type=button name=btn value=访问页面元素 onclick=test2();/;使用style属性可访问页面元素的样式对象。样式对象包含了这个页面元素持有的样式信息。 ;script function scrollAD() { document.getElementById(ad).style.top = document.body.scrollTop+100+px; } window.onscroll = scrollAD; function closeAD() { document.getElementById(ad).style.display=none; } /script …… div id=ad style=position:absolute;left:50px;top:100px; img src=image/183823_140280.gif alt=广告图片 / span style=cursor:hand; onclick=closeAD();关闭/span /div;Form 对象代表一个 HTML 表单。在 HTML 文档中 form 每出现一次，Form 对象就会被创建。;document.getElementById(“表单标签的ID”) document.getElementsByName(“表单标签的name”)[索引] document.表单标签的name属性 ;script function test1() { window.alert(document.getElementById(frm_1).action); window.alert(document.getElementsByName(frm)[0].method); window.alert(document.frm.id); } /script …… form id=frm_1 name=frm action=process.html method=post input type=text id=txt_1 name=txt / input type=submit id=btn_1 name=btnSubmit value=提交 / input type=button id=btn_2 name=btnTest value=测试 onclick=test1(); / /f