DOM模型.pptVIP

包头软件人才培训中心 第七章 * DOM 回顾 常用的浏览器对象有哪些？ 希望在网页打开时，就伴随弹出广告窗口，应使用什么事件？打开广告窗口使用window对象的哪个方法？ history对象的哪个方法相当于IE浏览器中的后退按钮？ 希望动态改变网页的背景色，应使用哪个对象的bgColor属性？ IE的地址栏对应哪个浏览器对象？它用来保存网页的地址信息 * 目标 了解文档对象模型DOM 熟悉文档对象中的各种属性和方法 * DOM简介 DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。 所谓文档对象模型，其实就是对网页HTML中的各种元素的一种内部的表示，例如HTML中的头、段落、列表、风格、ID等，所有的元素都能通过DOM来访问 。 DOM可以被看作是一棵拥有很多互相关联的节点的树。 * DOM简介 html ? head ??? titleSample Page/title ? /head ? body ???? pHello World!p ? /body /html * 访问DOM中的元素 getElementById可以通过惟一的ID属性值 。 getElementById很适合用于查找一个单独的元素 a id=sirius href=sirius.htmlJourney to the stars/a var elementRef = document.getElementById(sirius); * 访问DOM中的元素 JavaScript提供了通过标签名字来返回一组元素的方法：getElementsByTagName。 a href=sirius.htmlSirius/a a href=canopus.htmcanopus /a a href=arcturus.htmlarcturus /a a href=“vega.html”vega /a var anchorArray = document.getElementsByTagName(a); * 节点的访问顺序 node.childNodes：指定节点的所有子节点，包括文本节点和所有其他元素； node.firstChild：指定节点的第一个子节点； node.lastChild：指定节点的最后一个子节点； node.parentNode：指定节点的上级节点； node.nextSibling：指定节点的下一个兄弟节点； node.previousSibling：指定节点的上一个兄弟节点。 * 空白节点 对于一些文本描述的DOM结构（例如HTML文件），一些浏览器会在元素节点之间插入一些空白节点。 * 创建元素节点和文本节点 createElements就是创建新元素的函数。 var newAnchor = document.createElement(a); 创建函数createTextNode创建文本节点 var anchorText = document.createTextNode(monoceros); * 创建方法的选择 有3种基本的方法来将新的元素节点或者文本节点插入到网页中 放到最后：appendChild ()方法 放到某节点之前：insertBefore ()方法 替换掉原有的某个节点： replaceChild ()方法 * 改变元素的类型 没有什么直接的、简单的方法来改变一个元素的类型。 改变元素类型的主要手段——克隆。 注意：更改DOM的节点结构时要当心 * 删除一个元素或文本节点 removeChild函数能够用于删除父节点的任意子节点，并返回被删除的对象。 删除的元素不再存在于DOM中：它只存在于内存中。 * 读写元素属性 HTML元素最为常用的部分就是它的属性，JavaScript不仅能够读取这些属性值，而且还能写回新值。 getAttribute可以用于读取一个属性的值，而setAttribute则可以用于写入新值。 * 获得拥有特定属性值的所有元素 如果需要在input元素中寻找满足type= “checkbox”这个条件的所有元素 var inputs = document.getElementsByTagName(input); for (var i = 0; i inputs.length; i++) { ? if (inputs.getAttribute(type) == checkbox) ? { … ??? } } 解决方法——getElementsByAttribute函数 * 元素的class的增减 元素的class都可以通过className属性访问。 该属性的值是字符串。