第三篇 DOM.pptVIP

* * 谢谢大家！ 第三章（DOM对象） 第3章 DOM对象 第三章（DOM对象） * * DOM对象模型简介 结点的引用 结点的操作 结点的应用 DOM DOM是文档对象模型（Document Object Model）的简称。借助DOM模型，可以将一个结构化文档转换为DOM树，程序可以访问、修改、增加、删除树里的结点。 Ajax编程的核心： 通过XMLHttpRequest发送异步请求 使用DOM动态加载服务器响应 * * DOM简介 第三章（DOM对象） Document对象 HTML文东可以包括文本、图片、表单、链接、锚点等各种对象，但document对象是其中最常用的。 document对象时windows对象的一个属性，该对象与窗口中显示的HTML文档对应，该对象主要对应文档的body部分，JS操纵该对象使得呆板的静态页面具有动态效果 document对象主要包含以下的子节点（子对象），锚点对象（anchors）、图片对象（image）、表单对象（forms）、链接对象（links）等。 * * DOM简介 第三章（DOM对象） Document对象中的树形结构 在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容。 * * DOM简介 第三章（DOM对象） html head titledemo/title /head body h1topic/h1 psomething strongimportant/strong/p /body /html 部分属性[3/01] alink：活动链接的颜色，即当鼠标放置在链接上时链接的颜色 bgcolor：背景颜色 fgcolor：文本或前景颜色 link：未访问链接的颜色 vlink：已访问链接的颜色 Cookie：允许读写HTTP cookie Domain：同一域名下Web服务器的一个安全属性 lastModified：带有页面最后修改日期的字符串 referrer：把浏览器链接到本文档的源文档URL title：当前文档的标题 URL：包含当前文档URL的字符串 在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容。 * * DOM简介 第三章（DOM对象） 方法 clear()：清空当前文档所有内容 close()：关闭文档的输入流 focus()：将焦点交给文档 getElementById()：返回具有指定ID的第一个对象的引用 getElementByName()：返回具有指定名字的对象集合 getElementsByTagName()：返回具有指定标签名的对象集合 open()：打开一份新文档，并擦出旧文档内容 write()：向当前文档追加写入文本 writeln()：与write()相同，但如果在pre标签中使用该方法，会追加一个换行 在DOM中，HTML文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容。 * * DOM简介 第三章（DOM对象） 结点的类型和组成 每个节点都由一个Node对象表示，Node对象提供了nodeType属性来表示节点的类型。DOM为不同类型的节点提供了相应的接口，当知道一个节点为某种类型时，则可以使用相应的接口所定义的属性和方法。 HTML中最常见的就是元素结点，一个元素结点由标签名、属性结点和文本结点组成 例：a href =my site/a 节点之间的关系 节点与节点之间通常有3种关系：父子关系、兄弟关系和祖孙关系。 * * DOM简介 第三章（DOM对象） 根据ID属性引用结点[3/02] 在HTML中，可以给节点添加一个id属性，从而通过document对象的getElementById方法来查找拥有指定id属性值的节点。 说明：JavaScript使用唯一的id属性及其相关的document.getElementById（）方法唯一标识文档中所有的XML/HTML元素（结点），如果表单数据不准备发送到服务器去做处理，那么name属性便可省略；name属性不需要是唯一的，但id属性则必须唯一 根据name属性引用节点[3