1、第7章 JavaScript常用文档对象HTML文档对象及其常用元素对象动态改变网页内容和样式17.1 HTML文档对象结构HTML文档对象包括网页显示的各个元素对象27.1 HTML文档对象结构3HTML文档中的元素静态地提供了各级文档对象的内容，CSS设置了网页显示的样式，本章将使用JavaScript程序动态地改变网页中各级文档对象的内容及网页样式，而HTML元素中的事件项，则是达到这一目的的“必经之路”。7.1 HTML文档对象结构4示例，编程实现用户单击一次按钮后，不可以再次单击它。7.1 HTML文档对象结构57.1.1 文档对象的结点树文档对象中的内容与HTML文档中的元素是相对
2、应的，实际上，每个HTML文档都可以用结点树结构来表现，并且通过元素、属性和文字内容三要素来描述每个结点。主体结点元素 根结点元素 文档对象 document 头结点元素 文字内容“文档对象”标题结点元素 文字内容“文档对象示”例”h1 结点元素 p 结点元素 a 结点元素 文字内容“其他示例”属性 href 7.1 HTML文档对象结构67.1.1 文档对象的结点树文档对象结点树中的每个结点代表一个元素对象，这些元素对象的类型虽然可以各不相同，但是它们都具有相同的结点属性和方法（每种元素对象还有一些特有的属性和方法），通过这些结点属性和方法，JavaScript就可以方便地得到每个结点的内容
3、，并且可以进行添加、删除结点等操作。1每个结点树有一个根结点2除了根结点，每个结点都有一个父结点3每个结点都可以有许多子结点4具有相同父结点的结点为“兄弟结点”7.1 HTML文档对象结构77.1.2 得到文档对象中元素对象的一般方法1通过元素标识名得到一个元素对象:document.getElementById(元素标识名)2通过元素标签名得到一组元素对象数组:document.getElementsByTagName(元素标签名)结点对象.getElementsByTagName(元素标签名)3通过CSS样式定义得到一组元素对象数组:document.querySelectorAll(CS
4、S样式定义)结点对象.getElementsByTagName(CSS样式定义)4通过元素名得到一组元素对象数组:document.getElementsByName(元素名)结点对象.getElementsByName(元素名)5通过结点关系:parentElement、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、children06其他方法7.2 HTML文档对象87.2.1 文档对象的属性和方法7.2.2 文档对象的cookie属性1设置cookie2取出cookie3删除coo
5、kiecookie名cookie值;expires=过期日期字符串;domain=域名;path=路径;secure;cookie1名cookie1值;cookie2名cookie2值;7.2 HTML文档对象97.2.3 表单及其控件元素对象1表单对象表单对象是文档对象的一个主要元素，包含许多用于收集用户输入内容的元素对象，如文本框（text）、按钮（button）、单选钮（radio）、复选钮（checkbox）、重置按钮（reset）及列表（select）等。通过这些元素对象，表单将用户输入的数据传递到服务器端进行处理。示例，发送电子邮件的表单 7.2 HTML文档对象107.2.3 表
6、单及其控件元素对象1表单对象2表单中的控件元素对象 表单中的控件元素对象一般都可以与HTML的元素一一对应。3列表及列表选项控件元素对象添加列表选项删除列表选项选择列表选项4表单元素对象的应用实例new option(选项的文字内容,选项的值,初始是否选上,是否选上);7.2 HTML文档对象117.2.3 表单及其控件元素对象1表单对象2表单中的控件元素对象 表单中的控件元素对象一般都可以与HTML的元素一一对应。7.2 HTML文档对象127.2.3 表单及其控件元素对象3列表及列表选项控件元素对象 北京 上海 天津 北京 上海 天津 北京 上海 天津下拉列表单选列表多选列表7.2 HTM
7、L文档对象137.2.3 表单及其控件元素对象3列表及列表选项控件元素对象添加列表选项删除列表选项选择列表选项4表单元素对象的应用实例new option(选项的文字内容,选项的值,初始是否选上,是否选上);7.2 HTML文档对象147.2.3 表单及其控件元素对象4表单元素对象的应用实例用JavaScript程序操作网页中的表单内容 移动多选列表中的元素 控制表单中的光标7.2 HTML文档对象157.2.4 链接对象链接对象对应的HTML中的元素是a，它同样可以用“7.1.2得到文档对象中元素对象的一般方法”小节中介绍的任意一种方法得到。链接对象所包含的属性与窗口（window）对象中的
8、location对象（详见“8.4 网址（location）对象”）的属性完全一样，主要包括链接地址的内容及链接目标等，JavaScript可以通过改变这些属性值而改变链接对象的内容。示例，单击一个链接，将会显示提示信息“是否离开当前页？”，如果单击“OK”按钮，将会显示下一页的内容，否则保持在当前页。7.2 HTML文档对象167.2.5 图像对象图像对象对应的HTML中的元素是img，它也可以用“7.1.2得到文档对象中元素对象的一般方法”小节中介绍的任意一种方法得到。图像对象有的属性是只可以读取，不可以改变的。示例一，制作翻转图片的效果。当鼠标指针移动到不同的链接上时，图片会出现不同的效
9、果。示例二，在网页的固定位置处，一星期7天每日显示不同的图像内容。星期日 星期一 星期二 星期三 星期四 星期五 星期六0.gif 1.gif 2.gif 3.gif 4.gif 5.gif 6.gif7.3 动态改变网页内容和样式177.3.1 动态改变网页内容1innerHTML的方法通过文档结点树中结点的innerHTML属性，不仅可以得到指定元素中的HTML语句内容，还可以通过重新设置元素中的内容来改变网页的显示内容。示例，用innerHTML的方法显示、修改网页中的文字内容。当单击“显示”按钮时，信息框中显示网页中的内容；当单击“修改”按钮时，将可修改网页中的文字内容。7.3 动态改
10、变网页内容和样式187.3.1 动态改变网页内容2添加、删除结点的方法通过文档结点树中结点的appendChild（node）、removeChild（node）、insertBefore（newNode,beforeNode）和createElement（“大写的元素标签名”）等方法，可以方便地在HTML文档中添加或删除元素。示例，加一个“添加”按钮和一个“删除”按钮，单击“添加”按钮后在按钮行前加一个div元素；单击“删除”按钮，将删除一个添加的元素。7.3 动态改变网页内容和样式197.3.2 动态改变网页样式动态改变网页样式指的是通过JavaScript程序来设置或改变指定的HTML元
11、素对象的网页样式属性，从而可以改变网页的表现方式。其语法规则如下。值得注意的是，如果属性名中带有减号“”，那么，在JavaScript中减号后的字母就应该变为大写字母，如border-color在JavaScript中就应该变为borderColor。网页元素对象.style.属性名=属性值7.3 动态改变网页内容和样式207.3.2 动态改变网页样式文档对象提供了各种类型元素对象的定位及尺寸属性，这些属性基本上用于读取，而不可以进行设置。1区域client真正能够显示网页内容区域offset包括了元素边线在内的所有区域scroll 包含全部网页内容的区域2定位offset 相对于包含当前元素的上一级元素的原点，如果没有上一级元素，则表示相对于的原点坐标scroll 相对于网页内容区域端点的坐标7.3 动态改变网页内容和样式217.3.2 动态改变网页样式示例，有两个单选钮，如果用户选中“正方形”单选按钮，则隐藏第二行“宽度”栏；如果用户选中“长方形”单选按钮，则显示第二行“宽度”栏。
