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,当然如果文章中出现错误,请一定指正。