DOM(二)——XML DOM

XML（Extensible Markup Language）可扩展标记语言（可以通过这篇博客简单了解XML基础介绍），DOM（Document ObjectModel）文档对象模型（通过上篇博客了解DOM（一）——HTML DOM）。非常明显，XML DOM就是文档类型模型针对XML做的一些操作。是和HTMLDOM共同合作来完成网页数据的动态改变显示等问题！和XML DOM有很多相似的地方，但是基于XML和HTML的区别，他们的一些操作还是有很大不同的。来看一下JavaScript通过DOM对XML的操作相关知识。

        DOM在XML中关于节点，属性，方法等的概念，知识都是非常相似的，这里不再赘述，这里重点通过几个实例运用一下！

      我们先引进一个XML文件books.xml，以后操作都在它上进行：（注意观察XML和HTML的不同处和相同处）

[html] view plain copy print?

<span style="font-size:18px;">xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
<book category="children">
  <title lang="en">Harry Pottertitle>
  <author>J K. Rowlingauthor>
  <year>2005year>
  <price>29.99price>
book>
<book category="cooking">
  <title lang="en">Everyday Italiantitle>
  <author>Giada De Laurentiisauthor>
  <year>2005year>
  <price>30.00price>
book>
<book category="web">
  <title lang="en">Learning XMLtitle>
  <author>Erik T. Rayauthor>
  <year>2003year>
  <price>39.95price>
book>
<book category="web">
  <title lang="en">XQuery Kick Starttitle>
  <author>James McGovernauthor>
  <author>Per Bothnerauthor>
  <author>Kurt Cagleauthor>
  <author>James Linnauthor>
  <author>Vaidyanathan Nagarajanauthor>
  <year>2003year>
  <price>49.99price>
book>
bookstore>
span>

    一，解析XML文件，大多数浏览器都内建了读取和操作XML的解析器，通过解析器把XML转换为JavaScript可存取的对象。但是这里的以IE为内核的和FireFox或其他的浏览器是不同的，这里看个全面的加载解析XML文件的例子：（以上边books.xml进行实验）

[javascript] view plain copy print?

"font-size:18px;">

        "text/javascript">
            try //Internet Explorer
              {
                      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//创建IE浏览器的XML文档对象
              }
            catch(e)
              {
                  try //Firefox, Mozilla, Opera, etc.
                    {
                          xmlDoc=document.implementation.createDocument("","",null);//创建空的XML文档对象
                    }
                  catch(e) {alert(e.message)}
               }
            try
              {
                  xmlDoc.async=false;//关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本
                  xmlDoc.load("/books.xml");//加载books.xml文件。注意：loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件
                  document.write("xmlDoc is loaded, ready for use");//表明创建成功
              }
            catch(e) {alert(e.message)}//创建失败，给出信息提示

    二，主要是对节点的各种操作了，主要就是一些属性和方法的使用，这里先看一下典型最常用的属性和方法：

 

XML DOM典型属性	XML DOM常见方法
一些典型的 DOM属性： x.nodeName - x的名称 x.nodeValue - x的值 x.parentNode - x的父节点 x.childNodes - x的子节点 x.attributes - x的属性节点	x.getElementsByTagName(name) -获取带有指定标签名称的所有元素 x.appendChild(node) -向 x插入子节点 x.removeChild(node) -从 x删除子节点

 

   更多的详细请看，非常详细：xmldom属性与方法详解。

        1，首先看一下节点的访问：可以通过三种方法（和HTML区别很大）：

1. 通过使用 getElementsByTagName()方法

2. 通过循环（遍历）节点树

3. 通过利用节点的关系在节点树中导航

         由于XML的内容量要比HTML文件的量小的多，可以通过b,c两种方法，HTML也可以，但是效率是非常差的（一般不用）。下边看一个循环节点树的实例：

[javascript] view plain copy print?

"font-size:18px;">

                 "text/javascript" src="/example/xdom/loadxmldoc.js">



        "text/javascript">
            xmlDoc=loadXMLDoc("/example/xdom/books.xml");

            x=xmlDoc.documentElement.childNodes;//获得第一个book元素的子节点
            for (i=0;i//循环
            {
            if (x[i].nodeType==1)//检查其节点类型是否为元素节点（节点类型和HTML DOM中一样）
              {//Process only element nodes (type 1)
              document.write(x[i].nodeName);//输出元素节点
              document.write("");
              }
            }

         2，改变节点的的属性值可以通过nodeValue,setAttribute(),和HTML基本一样，比较简单。对于节点的删除，替换，创建，添加等，都是相似了，只要我们使用对应的方法或者属性即可完成，这里仅仅看了一个改变节点属性的例子：

[javascript] view plain copy print?

"font-size:18px;">

        "text/javascript" src="/example/xdom/loadxmldoc.js">




        "text/javascript">
            xmlDoc=loadXMLDoc("/example/xdom/books.xml");

            x=xmlDoc.getElementsByTagName("book")[0]
            y=x.getAttributeNode("category");
            y.nodeValue="child";

            document.write(y.nodeValue);

         3，这里我单独出来谈一下节点的克隆，也就是复制节点，也就是将原有的节点进行复制，看下边这个例子：

[javascript] view plain copy print?

"font-size:18px;">

        "text/javascript" src="/example/xdom/loadxmldoc.js">




        "text/javascript">
            xmlDoc=loadXMLDoc("/example/xdom/books.xml");
            x=xmlDoc.getElementsByTagName('book')[0];//得到为book的第一个节点
            cloneNode=x.cloneNode(true);//克隆此节点
            xmlDoc.documentElement.appendChild(cloneNode);//将克隆好的节点添加到xml文件中

            //Output all titles
            y=xmlDoc.getElementsByTagName("title");
            for (i=0;i
            {
                document.write(y[i].childNodes[0].nodeValue);//循环显示title的节点
                document.write("");
            }

    三，在视频中看到这样一个功能，感觉是对XML操作前非常必要的，也就是对于XML中的空行和换行的处理

：

         Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而Internet Explorer 不会这样。这就需要我们在操作XML时，先将其空文本去掉：

         综上为XML DOM的简单理论学习，这里需要我们结合实例，来学习，多了解各种方法属性，结合HTML DOM一起学习。比较其中的同与异。当然这些都需要在用中不断发现，不断积累。

            DOM是学习AJAX的非常重要的一部分，起到了异步更新网页的的主要操作功能。当然AJAX中的核心还得学习XMLHttpRequest对象，下篇将来学习XMLHttpRequest的具体使用法。这段时间AJAX的学习，对B/S的很多块内容都起到了补充的作用。本来吗，AJAX就是多种知识结合的一个新知识。继续深入学习中……

转载至：http://blog.csdn.net/liujiahan629629/article/details/17122059