9.javascript(dom).pptVIP

SCWCD 进阶 JavaScript(DOM) DOM概述 自从第一次使用HTML将因特网上相关的文档连接起来后，DOM也许是Web上最伟大的创新了。DOM给予开发者空前的对HTML的访问能力，并使开发者能将HTML作为XML文档来处理和查看。 DOM很大程度上受到浏览器中动态HTML（DHTML）发展的影响，但W3C还是将它最先应用于XML。目前对最接近W3C DOM标准的是火狐浏览器。 DOM是针对XML的基于树的API。它关注的不仅仅是解析XML代码，而是使用一系列互相关联的对象来表示这些代码，而这些对象可以被修改且无需重新解析代码就可以直接访问它们。 DOM概述 DOM（document object model） 文档对象模型。 要理解DOM首先要先理解树的概念，下图是一段简单的HTML代码。 DOM概述 根据刚才的HTML代码，我们可以画出这么一颗文档树。 html标签为根节点的倒立树结构。 在DOM中除了元素以外，还有属性，文本值和注释的概念。 DOM基础 document对象用来表示整份文档，即当前网页，和window对象做区别，window对象表示的是窗口，所以document是window的一个子对象或者说是一个属性。 要访问html/元素，可以使用document的documentElement特性: var oHtml = document.documentElement; 如果想取得head/和body/元素，可以使用: var oHead = oHtml.firstChild;或者oHtml.childNodes[0]; var oBody = oHtml.lastChild;或者oHtml.childNodes[1]; 可以使用childNodes.length特性来获取子节点的数量: alert(oHtml.childNodes.length);//打印? DOM基础 HTML的DOM中定义了document.body作为指向body/元素的指针: var oBody = document.body; 有了上面的oHtml,oHead,oBody这三个变量，就可以先尝试确定它们之间的关系: alert(oHead.parentNode == oHtml);//打印？ alert(oBody.parentNode == oHtml);//打印？ DOM基础 访问指定节点 可以通过document对象中含有的集合来访问某些特定类型的节点 DOM基础 访问指定节点 DOM提供了一些方法来方便访问指定的节点。 DOM定义了getElementsByTagName()方法，用来返回一个包含所有的tagName(标签名)特性等于某个指定的元素的NodeList。例如，img/的tagName是”img”。 var oImgs = document.getElementsByTagName(“img”); 在把所有的图形都存于oImgs后，只需使用方括号标记或者item()方法，就可以访问子节点那样逐个访问这些节点了: alert(oImgs[0].tagName);//打印？ 可以使用一个星号的方法来获得document中的所有元素: var oAll = document.getElementsByTagName(“*”); DOM基础 DOM定义了getElementsByName()，它用来获取所有name特性等于指定值的元素。注意到所以带 “s”的方法返回的都是数组。 getElementById(),这是DOM定义的第三种方法,它将返回id属性等于指定值的元素。这里再次强调一个页面上id不能有重复。 DOM基础 创建和操作节点 之前，我们已经学过了如何访问文档中的不同节点，不过这仅仅是使用DOM所有实现的功能中的很小一部分。 还能添加、删除、替换DOM文档中的节点。正是这些功能使得DOM具有真正意义上的动态性。 DOM基础 创建节点的方法中最常用的几个方法是：createDocumentFragment()、createElement()和createTextNode()； createElement()、createTextNode()、appendChild(),假如有如下HTML页面: DOM基础 现在想使用DOM来添加如下列代码到上面这个页面中： pHello World!/p 这里可以使用createElement()和createTextNode()来达到目的。下面是实现步骤: 首先，创建p/元素: var oP = document.createElement(“p”); 第二，创建文本节点: var oText = document.c