DOM的思考总结
来源:互联网 发布:神户钢铁篡改数据事件 编辑:程序博客网 时间:2024/05/20 18:02
1.DOM是什么以及DOM与Javascript的关系
DOM是Document Object Model(文档对象模型)的英文首字母缩写。文档包括HTML和XML;对象说明了DOM是由对象组成的,而对象又有属性和方法;而模型说明了DOM是一种模子,而HTML和XML就是通过这个模子具体实现出来的。那么,DOM的存在是为了解决什么问题?为了理解这个问题,我们需要了解一下DOM的历史。
在以前,不同的公司比如微软,Netscape都有自己的浏览器产品,也会在自己的浏览器中使用专属的脚本语言和网页表现技术。这就导致了使用过程中的诸多不便,用户看这个网页就必须安装相应的浏览器,阻碍了信息的共享和交流。这时有一个组织W3C,制定了一套统一的规则,大家都按照这个来做就可以解决这个问题。而这个规则就是DOM。
那DOM有什么作用呢?我们为什么要学习它呢?
在理解这个问题前,我们先了解一下DOM的组成。在谈到DOM结构时,我们常常说DOM对象树。我们先从一张图看看这棵树是什么样子的。
图中右侧的结构图是根据左侧的html文档画出来的,如果将它逆时针旋转90度,就会看出非常像一颗树。这棵树中有html、head、body、comment、input、type,在DOM中这些都叫做节点。换句话说就是DOM是由节点构成的。按照节点的不同作用,又分为5种类型。分别为:Element、Attr、Text、Comment、Document。
元素节点:是文档中最常见的节点,HTML或XML文档中的标签<body><input><div>都对应DOM树中的元素节点;
属性节点:是一个元素节点上定义的某个属性,例如<input>中定义的 type属性就对应DOM树中的一个属性节点;
文本节点:表示文档中的一段文字信息,例如:HTML文档中定义<div>Hello World</div>,其中Hello World就是一个文本节点;
注释节点:对应文档中的注释信息,例如:<!--Comment Message-->就是一个注释节点;
根节点:顾名思义表示整个文档的根,但是需要注意它不对应文档中任何内容。
每一个节点都是一个对象,有对象就是属性和方法。我通过导图整理了一下:
首先是共有的属性和方法:
每种类型特有的:
最后一个问题:那么DOM和JS是什么关系?举个例子,我有一辆HTML汽车,汽车中的每一个部件都是HTML的节点,有一天,我的发动机节点不好使了,我想换一个,那么我怎么换呢?我需要使用工具创建一个新发动机节点,然后使用工具从HTML汽车中找到旧的发动机节点把它拆下来,然后再换上新的发动机节点。其实在这个过程中,我描述了一个使用js来操作DOM的过程。使用的工具就是javascript.我想大家应该明白了DOM和Javascript的关系了吧。
2.XML DOM的相关知识点
我们在学习过程中接触HTML DOM的比较多,平时敲的例子也都是操作HTML节点的。这里不在赘述。我整理了一下关于XML的一下知识点。
Javascript中装载XML文档
function loadXML(flag,xmldoc){ if(window.ActiveXObject){ //IE浏览器 var activexName = ["MSXML2.DOMDocument","Miscrosoft.XmlDom"]; var xmlobj; for(var i = 0; i < activexName.length;i++){ try{ xmlobj = new ActiveXObject(activexName[i]); }catch (e){ } } if (xmlobj){ xmlobj.async = false; if(flag){ xmlobj.load(xmldoc); }else { xmlobj.loadXML(xmldoc); } return xmlobj.documentElement; }else { alert("装载XML文档的对象创建失败!"); return null; } }else if (document.implementation.createDocument){ //针对FireFox类浏览器 var xmlObj; if (flag){ //装载xml文件 xmlObj = document.implementation.createDocument("","",null); if (xmlObj){ xmlObj.async =false ; xmlObj.load(xmldoc); return xmlObj.documentElememt; }else { //装载xml字符串 xmlObj = new DOMParser(); var docRoot = xmlObj.parseFromString(xmldoc,"text/xml"); return docRoot.documentElement; } } alert("装载XML文档的对象装载失败!"); return null; }}
DOM操作XML
function test(){ var rootElement = loadXML(true,"Testbooks.xml"); var rootDocument = rootElement.parentNode; var bookElement = rootDocument.createElement("book"); var textNode = rootDocument.createTextNode("AJAX Hello"); bookElement.appendChild(textNode); rootElement.appendChild(bookElement); var bookElements = rootElement.getElementsByTagName("book"); }
DOM对象序列化成XML字符串
function serializeDOM(xmldoc){ if(xmldoc.xml){ //IE浏览器 return xmldoc.xml; }else if(window.XMLSerializer){ //FireFox浏览器 var seria = new XMLSerializer(); return seria.serializeToString(xmldoc); } return null; }
总结:从现在开始我尝试用自己语言来总结整理知识点,尽量少用ps,当然如果文章中出现错误,请一定指正。
- DOM的思考总结
- 有关DOM XSS的一点思考
- 程序员的思考总结
- dom节点的小总结
- 关于DOM的一些总结
- 有关DOM的小总结
- jQuery的DOM事件总结
- 有关DOM的小总结
- DOM树的增查改删总结
- jQuery的DOM事件总结
- Iterator的总结与思考
- javascript DOM原型思考(IE中原型扩展的限制)
- 也许,DOM 不是答案(手机APP页面开发的思考)
- DOM扩展:DOM API的进一步增强[总结篇-上]
- DOM扩展:DOM API的进一步增强[总结篇-下]
- javascript DOM的总结(基于JavaScript DOM编程艺术)
- Dom总结
- DOM 总结:
- EMIPLIB库分析三 MIPWAVInput
- How to Save a Screenshot
- 四川小吃---冰粉
- 按钮监听
- tika抓取文档内容 总结
- DOM的思考总结
- 我会发光噢耶
- 项目经验:用js实现行动态添加效果
- eclipse安装svn
- 2041 超级楼梯
- Ubuntu 开发服务器配置(SSH server,登陆到远程服务器进行文件共享)
- WPF学习--路由事件
- 一,入门基础—— 6,Xcode偏爱设置 提示声音设置
- XMPP入门