码迷,mamicode.com
首页 > Web开发 > 详细

ajax——dom对xml和html的操作

时间:2014-07-01 11:29:36      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:ajax   dom   html   javascript   

     上篇文章说到了dom的基础,dom可以操作xml和html,这次主要写利用dom的api去怎样去操作xml和html文档。

dom操作xml

     dom操作xml文档之前必须把xml文档装载到xml dom对象,因此需要两个步骤1.利用javascript装载xml文档。2.dom来操作装载后的xml文档。

     利用javascript装载xml文档也可以分为:1.装载同域的xml文件。2.装载一段表示xml字符串。

/* 
 * 封装IE和firefox类浏览器中装载同域xml文件和xml字符串的方法,返回的是xml对象dom对象中的根元素节点
 * @param flag true装载xml的文件,false表达式装载xml字符串
 * @param xmldoc flag为false装载xml文件的路径,flag为false表示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]);
                break;
            } catch (e) {

            }
        }

        if (xmlObj) {
            //同步方式装载xml数据
            xmlObj.async = false;
            if (flag) {
                //装在xml文件
                xmlObj.load(xmldoc);
            } else {
                //装载xml的字符串
                xmlObj.loadXML(xmldoc);//解析一个 XML 标签字符串来组成该文档
            }
            //返回根元素节点
            return xmlObj.documentElement;
        } else {
            alert("装载xml文档的对象创建失败。");
            return null;
        }
    } else if (document.implementation.createDocument) {        //创建一个新 Document 对象和指定的根元素。
        //针对firfox浏览器
        var xmlObj;
        if (flag) {
            //装载xml文件
            xmlObj = document.implementation.createDocument("", "", null);//创建一个新 Document 对象和指定的根元素。
            if (xmlObj) {
                //同步方式装载
                xmlObj.async = false;
                xmlObj.load(xmldoc);
                return xmlObj.documentElement;
            }
        } else {
            //装载xml的字符串
            xmlObj = new DOMParser();   //DOMParser 对象解析 XML 文本并返回一个 XML Document 对象
            var docRoot = xmlObj.parseFromString(xmldoc, "text/xml");//解析 XML 标记
            return docRoot.documentElement;
        }
    }
    alert("装载xml文档的对象创建失败。");
    return null;
}

      xml文档

<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book>
        <author>Peter</author>
        <name>Hello Ajax</name>
    </book>
    <book>
        <author>Jack</author>
        <name>Ajax Puzzle</name>
    </book>
</books>
     dom操作xml文档

            function test(){
                var rootElement=loadXML(true,"TestBook.xml");  //装载xml文档,并返回xml dom对象的根元素节点
                var rootDocument=rootElement.parentNode;  //找到父节点
                var bookElement=rootDocument.createElement("book");//创建book节点
                var textNode=rootDocument.createTextNode("AJAX Hello");
                bookElement.appendChild(textNode);  //在bookElement后添加文本节点
                rootElement.appendChild(bookElement);//在文本节点后添加
                var bookElements=rootElement.getElementsByTagName("book");  //返回所有的book节点
                alert("");
            }

dom操作html

     html文档

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <input type="button" value="TestDomApi" onclick="testDomApi()"/>
        <div id="div1">123123</div>
        <input type="text" id="inputtext"/>
        <div id="div2">
            456
            <div>
                789
            </div>
        </div>
        <input type="button" value="textclick" id="clic"/>
    </body>
</html>

     利用根节点的属性和方法操作html文档,可以创建元素节点,文本节点,元素节点。

                //获取根元素节点
                var htmlrootElement=document.documentElement;
                //获取指定的元素节点
                var divNode=document.getElementById("div1");
                //获取整个页面的div元素节点
                var divNodes=document.getElementsByTagName("div");
                //创建元素节点
                var newDivNode=document.createElement("div");
                //创建文本节点
                var newTextNode=document.createTextNode("aaaaaaaa");

     利用元素节点的属性和方法操作html文档,可以去操作元素节点的属性。

                //返回大写的标签名
                var tagName=divNode.tagName;
                //根据标签名获取元素节点
                var divNode2=document.getElementById("div2");
                var divNodes2=document.getElementsByTagName("div");
                //操作属性
                var inputtext=document.getElementById("inputtext");
                var flag=inputtext.hasAttribute("value");//判断是否有这个属性
                inputtext.setAttribute("value","textTest");//设置属性
                var textValue=inputtext.getAttribute("value");//获取属性值
                inputtext.removeAttribute("value");//移除属性值
                
                //另一种属性的操作
                inputtext.value="121212";
                var textValue2=inputtext.value;
                
                var clic=document.getElementById("clic");
                clic.onclick=function(){alert("12")};

     利用所有节点都拥有的的属性和方法操作html文档,可以管理html文档的所有节点的。 

                var divNode2=document.getElementById("div2");
                var inputtext=document.getElementById("inputtext");               
                //返回元素节点上的包含的属性节点
                var attributs=inputtext.attributes;
                //nodeName nodeValue nodeType
                var inputname=inputtext.nodeName;
                var nodetype=inputtext.nodeType;
                var nodevalue=inputtext.nodeValue;
                
                //返回所有子节点
                var childs=divNode2.childNodes;
                //获取父节点
                var parent=divNode2.parentNode;
                //获取第一个节点和最后一个节点
                var first=divNode2.firstChild;
                var last=divNode2.lastChild;
                //获取兄弟节点
                var next=divNode2.nextSibling; //上一个兄弟节点
                var prev=divNode2.previousSibling;//下一个兄弟节点
                
                //判断是否有子节点
                var flag2=divNode2.hasChildNodes();
               
                //追加节点
                var new2=document.createElement("div");
                var text2=document.createTextNode("insert");
                new2.appendChild(text2);
                divNode2.insertBefore(new2,divNode2.firstChild);  //插入子节点并将子节点移动到第一位
                
                var new3=document.createElement("div");
                var text3=document.createTextNode("insert3");
                new3.appendChild(text3);
                divNode2.insertBefore(new3,null);//插入子节点
                divNode2.insertBefore(new3,divNode2.firstChild);  //将子节点移动到第一位
                
                //移除节点
                var remove=divNode2.removeChild(new3);
                //替换节点,用另一个节点替换前节点的一个节点
                var text4=document.createTextNode("insert4");
                var new4=document.createElement("div");
                new4.appendChild(text4);
                var replace=divNode2.replaceChild(new4,divNode2.firstChild);
                var replace=divNode2.replaceChild(newDivNode,divNode2.firstChild);
                
                //clone节点
                var clone1=divNode2.cloneNode(true);//克隆子节点
                var clone2=divNode2.cloneNode(false);//不克隆子节点

     dom对象对xml文档和html文档的操作,可以在客户端更快速的,更直接的管理文档中的节点。

ajax——dom对xml和html的操作,布布扣,bubuko.com

ajax——dom对xml和html的操作

标签:ajax   dom   html   javascript   

原文地址:http://blog.csdn.net/suneqing/article/details/35834457

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!