第第09章编程和操作

1、1DOMDOM编程和编程和CSSCSS操作操作第第9 9章章2勿以恶小而为之，勿以善小而不为。3大学生为什么找工作很难？大学生为什么找工作很难？3讨论4JavaScriptJavaScript中浏览器对象模型核心的对象有哪些？中浏览器对象模型核心的对象有哪些？ 回顾与作业点评使用使用JavaScriptJavaScript怎么样在网页弹出一个带一个确认按钮的警怎么样在网页弹出一个带一个确认按钮的警告框？告框？使用使用JavaScriptJavaScript怎么样打开一个无工具栏无菜单栏的新窗口？怎么样打开一个无工具栏无菜单栏的新窗口？怎么实现每间隔一段时间重复执行一段怎么实现每间隔一段时间重复

2、执行一段JavaScriptJavaScript代码？代码？怎么样获得一个输入框的值和设置输入框的值？怎么样获得一个输入框的值和设置输入框的值？怎么样控制一个怎么样控制一个HTMLHTML元素的显示和隐藏？元素的显示和隐藏？5预习检查怎样使用document来获得一个HTML节点？怎样获得一个已知节点的第一个和最后一个子节点？怎样向一个节点中增加和删除子节点？怎样获得一个表格中的所有的行和所有的列？怎样访问HTML DOM元素的style对象？怎样为一个HTML元素应用类样式?6内容进度HTML DOM使用DOM操作表格JavaScript操作CSS样式表7HTML DOM HTML DOM

3、文档对象模型（Document Object Model，DOM）是一个与语言无关、与平台无关的标准接口规范 在学习Java基础课程的文件读取时，接触过使用XML DOM解析XML文档，接下来将学习使用HTML DOM访问和操作HTML文档 和XML DOM解析XML文档一样，HTML DOM也是将HTML文档解析成树形结构8在HTML DOM树中，每一个HTML标签、标签中的文本内容，都是一个节点整个文档首先是一个文档节点document，每个HTML标签是一个元素节点，元素中的文本是文本节点，标签的属性是属性节点HTML DOM（以下简称DOM）树中，每个节点处在树上的一个具体的位置，与其

4、他节点存在父节点、子节点、同级节点、先辈、后代等关系访问节点 6-19 获取节点 上一章我们学习BOM时，使用了getElementById(id)、getElementsByName(name)、getElementsByTagName(tagname)这三个方法获取了对象，在DOM中，仍然也是通过这三个方法访问HTML文档的节点 前两个方法在XML DOM不被支持 除了这三个方法以外，我们还可以通过使用一个元素节点的parentNode、firstChild以及lastChild属性来访问该节点的父节点、第一个子节点、最后一个子节点 var n1 = document.getElement

5、ById(showdiv) n1.parentNode.removeChild(n1)访问节点 6-210访问节点 6-3DOM 对象常用方法：方法方法描述描述getElementById()返回带有指定 ID 的元素。getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。appendChild()把新的子节点添加到指定节点。removeChild()删除子节点。replaceChild()替换子节点。insertBefore()在指定的子节点前面插入

6、新的子节点。createAttribute()创建属性节点。createElement()创建元素节点。createTextNode()创建文本节点。getAttribute()返回指定的属性值。setAttribute()把指定属性设置或修改为指定的值。11 获取节点 通过节点的firstChild和lastChild属性获取页面table元素中的值 案例代码 请仔细阅读代码中的注释，分清节点之间的层次关系 同时还要注意，在DOM树最末端的元素（例如单元格）中如果包含有文本的话，则该元素不是末端节点，在该元素下还存在一个文本节点（例如单元格内文本）访问节点 6-412节点信息每个节点都包含如

7、下三个属性nodeName：根据节点类型的不同，nodeName体现不同的内容如果是元素节点，其nodeName值为标签名称，如果是属性节点，则为属性名称，如果是文本或文档节点，则固定是“#text”和“#document”nodeValue对于文本节点，nodeValue值为文本内容；对于属性节点，nodeValue值为属性值；对于元素节点和文档节点不可用nodeType：返回节点的类型其中元素节点、属性节点、文本节点、注释节点和文档节点分别用1、2、3、8、9表示访问节点 6-513 获得和设置属性值 当我们获得了一个节点之后，DOM提供了获得或改变节点属性值的标准方法。 node.get

8、Attribute(属性名)：获得属性的值，也可以通过“node.属性名”方式获取属性值 node.setAttribute(属性名，属性值)：根据属性名设置属性值，也可以通过“node.属性名 = 属性值”方式设置 在上一章“银行服务质量评价系统”的案例中，其实已经通过“node.属性名”方式获取属性值。 案例代码 通过一个JavaScript函数，完成替换页面中第一个图像的功能。function changeImg() var imgs = document.getElementsByTagName(img); /或imgs0.src = images/banner5.jpg imgs0.

9、setAttribute(src,images/banner5.jpg);访问节点 6-614创建并插入节点接下来通过一个JavaScript案例来看一下如何通过DOM创建、复制并在HTML文档中插入节点程序运行结果如图所示（上半部分为点击“复制图像”的结果，下半部分为点击“增加图像”的结果）案例代码插入、删除和替换节点15删除、替换节点删除节点：removeChild(node)，其中参数为要删除的节点替换节点：replaceChild(newNode,oldNode)，其中第一个参数为新节点，第二个参数为被替换掉的节点案例代码插入、删除和替换节点16课堂练习00:30317练习内容练习时间

10、：30分钟K=课堂练习练习内容完成访问节点，插入、删除和替换节点小节的任务18内容进度HTML DOM使用DOM操作表格JavaScript操作CSS样式表19 针对表格插入、复制和删除行 继续操作之前接触的员工信息表，表下部有三个按钮，分别是“添加新行”、“复制表头行”和“删除数据首行”，界面如图所示使用DOM操作表格20针对表格插入、复制和删除行当用户分别单击“添加新行”、“复制表头行”和“删除数据首行”三个按钮，出现如图（点击两次“添加新行”按钮）所示的结果案例代码使用DOM操作表格21使用DOM操作表格function addRow()var lastRow = document.ge

11、tElementById(lastRow)var newRow = document.createElement(tr)/创建行节点var col1 = document.createElement(td)/创建单元格节点col1.innerHTML = 106/为单元格添加文本var col2 = document.createElement(td)col2.innerHTML = 蒋涵var col3 = document.createElement(td)col3.innerHTML = var col4 = document.createElement(td)col4.innerHTM

12、L = 12000/把单元格添加到行节点中newRow.appendChild(col1) newRow.appendChild(col2)newRow.appendChild(col3)newRow.appendChild(col4)lastRow.parentNode.appendChild(newRow)/把新行节点添加到表格末尾22使用DOM操作表格function copyRow()var hRow = document.getElementById(hRow)var copyRow = hRow.cloneNode(true)/复制指定的行及子节点hRow.parentNode.a

13、ppendChild(copyRow)function delRow()var delRow = document.getElementById(1Row)delRow.parentNode.removeChild(delRow)23 根据行、列数操作表格 Table、TableRow、TableCell对象 在HTML DOM中，Table对象代表一个HTML表格，TableRow对象代表HTML表格的行，TableCell对象代表HTML表格的单元格 通过操作这三个对象实现对HTML表格的操作使用DOM操作表格24Table对象分类分类集合集合/属性属性/方法方法描述描述集合集合rows包

14、含表格中所有行的一个数组（包括包含表格中所有行的一个数组（包括 、 和和 中定义的所有行）中定义的所有行）cells包含表格中所有单元格的一个数组包含表格中所有单元格的一个数组属性属性id表格表格idcaption对表格的对表格的元素的引用元素的引用方法方法createCaption()、deleteCaption()为表格创建、删除一个为表格创建、删除一个caption元素元素createTHead()、deleteTHead()在表格中创建（空的）、删除一个在表格中创建（空的）、删除一个tHead元素元素createTFoot()、deleteTFoot()在表格中创建（空的）、删除一个在

15、表格中创建（空的）、删除一个TFoot元素元素insertRow(index)在表格中插入一个新行在表格中插入一个新行deleteRow(index)从表格删除一行从表格删除一行使用DOM操作表格25TableRow对象TableCell对象案例代码分类分类集合集合/属性属性/方法方法描述描述集合集合cells包含改行中所有单元格的一个数组包含改行中所有单元格的一个数组属性属性id该行该行idinnerHTML行的开始标签和结束标签之间的行的开始标签和结束标签之间的HTMLrowIndex该行在表中的位置该行在表中的位置方法方法insertCell()在一行中的指定位置插入一个空的在一行中的指

16、定位置插入一个空的td元素元素deleteCell(index)删除行中的指定的单元格删除行中的指定的单元格分类分类集合集合/属性属性/方法方法描述描述属性属性id该行该行idinnerHTML单元格的开始标签和结束标签之间的单元格的开始标签和结束标签之间的HTMLcellIndex单元格在某行的单元格集合中的位置单元格在某行的单元格集合中的位置使用DOM操作表格26课堂练习00:40327练习内容练习时间：40分钟K=课堂练习练习内容完成如图所示的网上书城购物车表格页面28内容进度HTML DOM使用DOM操作表格JavaScript操作CSS样式表29 Style对象 样式属性设置 在HT

17、ML DOM中，Style是个对象，代表一个单独的样式声明；同时style也是个属性，通过“HTML元素.style”访问该HTML元素的样式表集合。 设置指HTML元素样式属性的语法为： HTML元素.style.样式属性=样式值“ 区分JavaScript访问元素的样式与HTML标签样式 HTML标签CSS样式: font-family JavaScript中Style对象的样式属性：fontFamily document.getElementById(succ).style.display=none“; document.body.style.background=#FFCC88 url

18、(bg.jpg) no-repeat“; document.getElementById(div1).style.font= bold italic 14px arial,serif“; document.getElementById(showDiv).style.fontSize=smaller“;JS操作CSS样式表 7-130Style对象HTML元素样式属性属性描述color设置文本的颜色font设置所有的字体属性fontFamily设置字体类型fontSize设置字体大小fontStyle设置字体样式fontWeight设置字体粗细letterSpacing设置字符间距lineHei

19、ght设置行间距textAlign对齐文本textDecoration设置文本修饰textIndent设置首行文本缩进textTransform设置大、小写效果whiteSpace设置折行和空白符wordSpacing设置词间距JS操作CSS样式表 7-231Style对象HTML元素样式属性Table元素属性属性可取值可取值描述描述borderCollapsecollapseseparate设置表格边框是否合并为单边框（如图设置表格边框是否合并为单边框（如图1所示），或者像在标所示），或者像在标准的准的HTML中那样分离（如图中那样分离（如图2所示）所示）borderSpacinglengt

20、h,length设置分隔单元格边框的水平和垂直间距设置分隔单元格边框的水平和垂直间距emptyCellshide、show设置是否在空单元格周围绘制边框设置是否在空单元格周围绘制边框JS操作CSS样式表 7-332Style对象HTML元素样式属性定位元素下面是“轮换横幅广告”中的代码，通过内联样式的形式给div元素进行定位。属性属性可取值可取值描述描述positionstatic、 relative、absolute、fixed把元素放置在一个静态的、相对的、绝对的、或固定的位置把元素放置在一个静态的、相对的、绝对的、或固定的位置中中leftauto、%、length设置元素左外边距离父元素

21、左外边的距离设置元素左外边距离父元素左外边的距离rightauto、%、length设置元素左外边距离父元素左外边的距离设置元素左外边距离父元素左外边的距离topauto、%、length设置元素上外边距离父元素上外边的距离设置元素上外边距离父元素上外边的距离bottomauto、%、length设置元素下外边距离父元素下外边的距离设置元素下外边距离父元素下外边的距离JS操作CSS样式表 7-433Style对象使用在学习CSS的时候，完成过网上书城的顶部导航菜单，结果如图所示该顶部导航菜单有一个特点是，当用户鼠标移动到某菜单项时，该菜单项的背景颜色变为黄色，移出时恢复原来的颜色案例代码Jav

22、aScript事件要想完成上面当用户鼠标移动到菜单项时背景色发生变化的效果，首先要能捕获到鼠标移动到菜单项的事件，然后在事件处理函数里改变菜单项的背景色事件事件描述描述onclick用户单击时触发用户单击时触发onload、onunload用户进入或离开页面时触发用户进入或离开页面时触发onchange当用户改变内容时时触发（常用于验证）当用户改变内容时时触发（常用于验证）onmouseover、onmouseout鼠标移至鼠标移至HTML元素上方或移出元素时触发元素上方或移出元素时触发onmousedown、onmouseup用户点击鼠标按钮或释放鼠标按钮时触发用户点击鼠标按钮或释放鼠标按钮时触发JS操作CSS样式表 7