学生实训课题报告 Web应用实战 实践练习四.doc

Web应用程序开发

实践练习四

专业：

专业：

班级：

姓名：

学号：

实践练习DOM基础

一相关知识点

DOM是一个平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档被表示为一个树形结构，其中每个节点代表文档的一部分（元素、属性、文本等）。

document对象代表整个HTML或XML文档，是访问其他所有节点的入口点，getElementById通过元素的ID获取元素，getElementsByClassName通过类名获取元素集合，getElementsByTagName通过标签名获取元素集合，querySelector方法根据给定的CSS选择器返回文档中第一个符合条件的元素，document.querySelectorAll返回一个NodeList对象，NodeList是一个类似数组的集合，包含了与指定选择器匹配的所有DOM节点。

元素节点的innerHTML获取或设置元素的HTML内容，textContent获取或设置元素的文本内容，setAttribute设置元素的属性，getAttribute获取元素的属性值，直接修改style属性会添加内联样式，使用className会覆盖所有现有的类，classList可以添加或删除单个类。

document对象方法createElement创建一个新的HTML元素（元素节点），其他元素节点不能直接使用createElement，但它们可以使用appendChild、insertBefore等方法来管理其子元素。

DOM遍历操作是访问和操作DOM树中节点的过程，主要通过父节点、子节点和兄弟节点进行遍历。parentNode返回当前节点的父节点，childNodes返回当前节点的所有子节点，firstChild和lastChild获取父节点的第一个和最后一个子节点，nextSibling和previousSibling获取指定子节点的下一个和前一个兄弟节点。children获取父元素的所有子元素集合，firstElementChild、lastElementChild、nextElementSibling、previousElementSibling仅返回元素节点。

DOM事件处理使得网页能够响应用户的各种交互，常用的事件处理方法是addEventListener，它支持多个事件处理函数且不覆盖已有的事件。

二练习目的

掌握DOM节点类型，访问DOM元素，修改DOM元素，DOM遍历，事件处理

三练习题

1.选择题

(1)DOM中哪个对象代表整个HTML文档？?(?B)

A.windowB.documentC.htmlD.body

(2)DOM中节点之间的关系通常被描述为什么?(?D)

A.父子关系B.兄弟关系C.祖先后代关系D.以上都是

(3)如何获取一个input元素的value?(?A)

A.element.value

B.element.getValue()

C.element.getAttribute(value)

D.element.inputValue

(4)要在特定位置插入新元素，应该使用哪个方法?(?A)

A.parent.insertBefore(newElement,referenceElement)

B.parent.insertAfter(newElement,referenceElement)

C.parent.insert(newElement,position)

D.parent.addAt(newElement,position)

(5)要获取元素的所有子节点应该使用哪个属性?(?B)

A.childrenB.childNodesC.childElementsD.descendants

(6)哪个属性只返回元素类型的子节点?(?A)

A.childrenB.childNodesC.elementChildrenD.childElements

(7)要获取元素的最后一个子元素应该使用哪个属性?(?D)

A.lastChildB.lastElementChildC.children[children.length-1]D.B和C都正确

(8)事件处理函数中this通常指向什么?(?C)

A.window对象B.document对象C.触发事件的元素D.事件对象

(9)哪个方法用于为元素添加