甚么是DOM？
DOM（Document Object Model）文件格式第一类数学模型，是词汇和网络平台的独断USB。。
容许流程和JAVA静态地出访和预览文件格式的文本。
为甚么要采用DOM？
Dom控制技术使采用者网页能静态地变动，如能静态地表明或暗藏两个原素，发生改变它的特性，减少两个原素等，Dom控制技术使网页的互动性大幅地进一步增强。
HTML的DOM
HTML的DOM是两个缓存第一类树，在应用流程中只留存这份，HTML的DOM修正HTML的文本会间接化学反应到应用流程中
API
NODE第一类API
在DOM眼里，HTML是由完全相同类别的结点共同组成的，那些结点都特性NODE第一类。
NODE第一类有两个nodeType的特性可用作推论结点类别
HTML完全相同类别的结点间都是有联络的：
坐落于两个结点其内的结点是该结点的父结点(parent)两个结点下的结点是该结点的子结点（children）同一个层级，具备完全相同父结点的结点是兄妹结点（sibling）一个结点的下两个层级的结点子集是结点后裔(descendant)父、曾祖父结点及大部份坐落于结点下面的，都是结点的先祖(ancestor)甚至于，NODE第一类也有出访结点的特性和方式
特性：
总的来说就是：得到节点的信息(结点名字、结点值)以及出访结点的兄妹、父亲
方式：
总的来说就是：添加、替换、删除子结点，推论是否有子结点，克隆子结点
document
HTML的DOM中我们提到并大量采用了document这个Javascirpt的内置第一类，请注意这个第一类仅仅能表示HTML的根结点。
document的特性：
document方式：
createElement()【创建两个原素结点】createComment()【创建注释】createAttribute()【创建特性结点】createTextNode()【创建文本结点】getElementById()【通过id得到该原素结点】getElementsByTagName()【通过标签名，得到大部份标签名的数组】ElementUSB
Element代表的是原素结点，是我们经常用到的两个USB！
Element特性：
tagName【返回的是原素标签的大写名称】Element方式：
getAttribute(String name)【得到特性的值】setAttribute(String name,String value)【设置特性的名称和值，不存在则创建】getElementsByTabName()【返回该原素结点的子孙结点的数组】removeAttribute()【移除特性】当我们设置特性的时候，我们不是调用方式来设置，而经常会这样做：
var input = document.createElement(“input”);
input.value = “aa”;
input.name = “bb”;
XML的DOM
我们可能会用XML文件作为客户端和服务器的传输文件。于是我们需要学习在JavaScript代码中通过DOM操作XML文件格式
XML和HTML的API是十分类似的，这里就不赘述了。
装载XML
客户端和服务端如果是通过XML文件或者XML字符串进行交互数据的话。那么，我们需要装载服务器的XML文件或XML字符串到JavaScript中的DOM第一类。
现在问题就是，IE和fireFox的装载XML方式是不一样的。因此，我们最好封装成两个方式来装载XML。
/**
* @param flag true代表的是文件，false代表的是字符串
* @param xmldoc 要封装成DOM第一类的字符串或文件
* @return 返回的是根结点的原素结点
* 重点放在高版本上！！
* */
function loadXML(flag, xmldoc) {
//应用流程是低版本的IE
var objXml;
if (window.ActiveXObject) {
//是IE的话，有两种方式来创建ActiveXObject第一类
var name = [“MSXML2.DOMDocument”, “Miscrosoft.XmlDom”];
for (var i = 0; i < name.length; i++) {
objXml = new ActiveXObject(name);
break;
}
//设置为同步【装载XML文件成DOM第一类，我们都是同步操作】
objXml.async = false;
//如果是字符串
if (flag == false) {
objXml.loadXML(xmldoc);
} else {
//如果是文件
objXml.load(xmldoc)
}
return objXml.documentElement;
//应用流程是fireFox或者高版本的IE
} else if (document.implementation.createDocument) {
//字符串
if (flag == false) {
//创建第一类，解析XML字符串
objXml = new DOMParser();
//解析到根结点
var root = objXml.parseFromString(xmldoc, “text/xml”);
return root.ml = new XMLHttpRequest();
//同步
objXml.open(“GET”, “1.xml”, false);
objXml.send(null);
//返回XML数据
return objXml.responseXML.documentElement;
}
//解析不了啦
} else {
alert(“解析不了了”);
}
}
测试
去除空白字符
如果有需要就加这段功能吧！
function removeBlank(xml) {
if (xml.childNodes.length > 1) {
for (var loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++) {
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1) {
removeBlank(currentNode);
}
if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3)) {
xml.removeChild(xml.childNodes[loopIndex–]);
}
}
}
}
XPATH
XPATH控制技术其实我们已经接触过了，在讲解XML的时候，我们已经采用过了XPATH控制技术了。
能参考我之前的XML博文：blog.csdn.net/hon_3y/arti…
XPATH总体可分为三种搜索：
绝对路径搜索（/根结点/子结点）相对路径搜索（子结点/子结点）【与绝对路径搜索的差别就是开头有无”/”】全文搜索（//子结点）如果我们要查找特性结点、文本结点、多条件的结点是这样写XPATH的
特性结点：（先找到原素结点/@特性名）文本结点：（先找到原素结点/test()）有条件查询结点：（先找到原素结点/[条件]）多条件查询结点：（先找到原素结点/[条件][条件]）【两个条件同时吻合】多条件查询结点：（先找到原素结点/[条件]｜先找到原素结点/[条件]）【或关系】我
我们想要在JavaScript中采用XPATH控制技术，那么我们也实现这两个方式，调用它就行了！
selectSingleNode()
IE10,IE11下无法采用selectSingleNode()方式。解决参考：wenda.so.com/q/145845351…
但是，我没有解决掉该问题。。。。。
下面是JavaScript代码：
/**
*
* @param xmldoc 代表的是XML的根结点
* @param xpath 给出的XPATH表达式
* @return 返回的是对应的结点或多个结点
*
*
*
*/
function selectSingleNode(xmldoc,xpath) {
//如果是IE,IE10，IE11解决不了….会的人告诉我一声！！
if(navigator.userAgent.indexOf(“.NET”)>0) {
var value = xmldoc.selectNodes(xpath)
return value;
}else {
//如果是fireFox
var xpathObj = new XPathEvaluator();
var value = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return value.singleNodeValue;
}
}
测试代码：<script type=”text/javascript” src=”loadXML.js” ></script>
<script type=”text/javascript” src=”xpath.js” ></script>
<script type=”text/javascript”>
function test() {
var file = loadXML(true, “1.xml”);
var xpathValue = selectSingleNode(file, “//dd”);
var value = xpathValue;
alert(value);
}
</script>
selectNodes()
由于下面IE问题我到现在还没有解决，所以下面间接测试FireFox应用流程了。
等我复习到Jquery的时候，再把这里的坑填了吧。。。
javaScript代码：/**
*
* @param xmldoc 代表的是XML的根结点
* @param xpath 给出的XPATH表达式
* @return 返回的是结点数组
*/
function selectNodes(xmldoc,xpath) {
var xpathObj = new XPathEvaluator();
//如果是多结点，返回的是迭代器
var iterator = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
//把迭代器的数据写到数组中
var arr = new Array();
var node;
while ((node=iterator.iterateNext())!=null) {
arr.push(node);
}
return arr;
}
测试代码：function test() {
var file = loadXML(true, “1.xml”);
var xpathValue = selectNodes(file, “//aa”);
var value = xpathValue;
alert(value);
}
效果：
如果文章有错的地方欢迎指正，大家互相交流
