第3讲：DOM操作基础与高级应用(北风网收费视频讲座).pptVIP

本讲目录 DOM基础概念 操作DOM 样式编程 综合应用 DOM基础 一、DOM基础 DOM给予开发者空前的对HTML的访问能力,并使开发者能将HTML作为XML来处理和查看.DOM代表着由微软公司和Netscape公司所引领的动态 1.1、DOM的诞生 尽管DOM很大程度上受到浏览器中动态HTML发展的影响,但W3C还是将其首先应用于XML. 1.2、XML简介 XML(可扩展标记语言)是从SGML(标准通用语言)发展而来.SGML的主要目的是定义使用标签来表示数据的标记语言的语法。 基于SGML语言的最著名的实现就是原始的HTML。 SGML常用来定义针对HTML的文档类型定义(DTD),同时它也常用来编写XML的DTD。SGML的问题在于,这允许出现一些奇怪的语法,这让创建HTML中的的解析器成为一个大难题. 某些起始标签不允许出现结束标签。如：HTML中的img. 某些起始标签可以选择性的出现结束标签或者隐含了结束标签.如：HTML中的p,当出现另一个p时，便假设在这之前有一个结束标签 某些起始标签要求必须出现结束标签.如HTML中的script 标签可以以任何顺序嵌套。即使结束标签不按照起始标签的逆序出现也是允许的。如：bThis is aisample/b string /i是正确的 某些特性要求必须包含值。如：img src=“pic.jpg”中的src特性. 某些特性不要求一定要有值。发td nowrap中的nowrap属性 定义特性的两边有没有双引号都是可以的，所以img src=“pic.jpg”和img src=pic.jpg都是允许的. 以上种种问题导致了SGML语言的解析器变成了一项艰巨的任务.以这些问题作为出发点。XML逐渐进入我们的视线. XML去掉了之前许多开发人员头疼的SGML的随意语法。在XML中，采用了如下的语法: 任何的起始标签都必须有一个结束标签 可以采用另外一种简化语法(/),如：br/XML解析器会将其翻译成br/br 标签必须按合适的顺序进行嵌套 所有的特性都必须有值 所有的特性都必须在值的周围加上双引号 这些特征使得开发一个XML解析器要简便得多，仅仅在XML出现后的前六年就衍生出多种不同的语言,包括MathML、SVG、RDF、RSS、SOAP、XSLT,而同时也将HTML改进为XHTML Dom操作基础与高级应用 Node接口也定义了一些所有节点类型都包含的属性和方法. Dom操作基础与高级应用 Dom操作基础与高级应用 3.4:创建和操作节点 创建新节点 createDocumentFragment() 创建文档碎片节点 createElement(tagname) 创建标签名tagname的元素 createTextNode(text) 创建包含文本text的文本节点 appendChild() 添加子元素 如：有以下HTML页面 html head titlecreateElementd() Example/title /head body /body /html 如：现在想使用DOM来添加下列代码到此页面上 pHellow World!/p 则： var Op = document.createElement(“p”); var oText = document.createTextNode(“Hellow World”); Op.appendChild(oText); document.body.appendChild(Op); 注意：在这里对于DOM的操作必须在页面完全载入之后才能进行。 2) 操作节点 removeChild() 删除一个节点 replaceChild() 替换一个节点的内容 insertBefor() 在一个节点之前插入新节点 如： html head title DOM Simple /title /head body p Hellow/p p how are you?/p p ok/p /body /html Eg: function removeElement() { var oP = document.body.getElementsByTagName(p)[0]; //document.body.removeChild(oP); oP.parentNode.removeChild(oP); } function ReplaceElement() { var oNewP = document.createElement(p); var oText