网页设计之Dom讲述.pptx

Dom(Document Object Model) 什么是Dom(Document Object Model) Dom:文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 JavaScript通过调用Dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。例如通过操作文本框的Dom对象，就可以读取文本框中的值、设置文本框中的值。 DOM的优势:使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，增强了易用性。 DOM的缺点:效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 节点层次 HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 节点关系 除文档节点之外的每个节点都有父节点。举例，head 和 body 的父节点是 html 节点，文本节点 Hello world! 的父节点是 p 节点。 大部分元素节点都有子节点。比方说，head 节点有一个子节点：title 节点。title 节点也有一个子节点：文本节点 DOM Tutorial。 当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1 和 p是同辈，因为它们的父节点均是 body 节点。 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。 html head titleDOM Tutorial/title /head body h1DOM Lesson one/h1 pHello world!/p /body /html 查找并访问节点 getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。 getElementById()方法：返回对拥有指定ID的第一个对象的引用。document.getElementById(id)。 getElementsByName()方法：返回带有指定名称对象的集合。因为文档中name的属性不可能唯一，所以getElementsByName()方法返回的是元素的数组，而不是一个元素。 getElementsByTagName()方法：返回带有指定标签名的对象的集合。返回元素的顺序是它们在文档中的顺序。getElementsByTagName(“*“)表示返回文档中所有元素的列表。可以用getElementsByTagName()方法获取任何类型的HTML元素的列表。 访问节点示例 示例1：返回文档中所有 p 元素的一个节点列表： document.getElementsByTagName(p); 示例2：返回所有 p 元素的一个节点列表，且这些 p 元素必须是 id 为 maindiv 的元素的后代： document.getElementById(maindiv).getElementsByTagName(p); 节点列表 使用节点列表时，通常要把此列表保存在一个变量中，例如 var x=document.getElementsByTagName(p); 变量 x 包含着页面中所有 p 元素的一个列表。 var x=document.getElementsByTagName(p); for (var i=0;ix.length;i++) { // do something with each paragraph } 也可以通过索引号来访问某个具体的元素，要访问第三个 p 元素，var y=x[2]; 综合示例 document对象的方法 write()方法：向文档写HTML表达式或javaScript代码。 writeln()方法：等同于write()方法，不同的是在每个表达式之后写一个换行符。 document.write(“a href=‘’百度/a”) 在onclick事件中写的代码会冲掉页面内容，只有在页面加载过程中write才会与原有内容融合在一起。 open()方法：打开一个新的文档，并擦除当前文档的内容。?open(“text/html”,replace)?。注意：调用open()方法打开