06_JavaScript对DOM对象操作.pptVIP

JavaScript对DOM对象操作 回顾 本窗口传递数据 不同窗口之间传递数据 window.open 模态窗口 框架窗口之间传递数据 Frame窗口 iframae窗口 本章目标 DOM简介 DOM属性和方法 DOM操作HTML元素实例 DOM DOM = Document Object Model，文档对象模型，根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式 。 DOM把网页和脚本以及其他的编程语言联系了起来 。 HTML-DOM HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。 脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象。 网页上的标签是一层层嵌套的，最外面的一层是HTML，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。 HTML-DOM 节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 HTML-DOM HTML-DOM 根据DOM的规定，HTML文档中的每个成分都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 通过DOM，可以访问HTML文档中的每个节点 节点的方法 特性/方法 类型/返回类型 说??? 明 nodeName String 节点的名字；根据节点的类型而定义 nodeValue String 节点的值；根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 指向这个节点所属的文档 firstChild Node 指向在childNodes列表中的第一个节点 lastChild Node 指向在childNodes列表中的最后一个节点 childNodes NodeList 所有子节点的列表 previousSibling Node 指向前一个兄弟节点；如果这个节点就是第一个兄弟节 点，那么该值为null nextSibling Node 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null hasChildNodes() Boolean 当childNodes包含一个或多个节点时，返回真 attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象；仅用于Element节点 appendChild(node) Node 将node添加到childNodes的末尾 removeChild(node) Node 从childNodes中删除node replaceChild(newnode, oldnode) Node 将childNodes中的oldnode替换成newnode insertBefore(newnode, refnode) Node 在childNodes中的refnode之前插入newnode JavaScript DOM的属性 节点的属性 nodeName 属性将返回一个字符串，其内容是给定节点的名字。 如果节点是元素节点，返回这个元素的名称； 如果是属性节点，返回这个属性的名称； 如果是文本节点，返回一个内容为#text 的字符串； nodeType 属性将返回一个整数，这个数值代表给定节点的类型 Node.ELEMENT_NODE ---1 -- 元素节点 Node.ATTRIBUTE_NODE ---2 -- 属性节点 Node.TEXT_NODE ---3 -- 文本节点 nodeValue 属性将返回给定节点的当前值 如果节点是元素节点，返回null； 如果是属性节点，返回这个属性的名称； 如果是文本节点，返回文本节点的内容； JavaScript DOM的属性 遍历节点树 childNodes: 该属性返回一个数组，这个数组由给定元素节点的子节点构成 firstChild