上篇文章说到了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文档的操作，长处是能够在client更高速的。更直接的管理文档中的节点。缺点就是在不同的浏览器中对文档的操作和载入存在这差异。

ajax——dom对xml和html的操作的更多相关文章

  1. 使用DOM进行xml文档的crud（增删改查）操作<操作详解>

    很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...

  2. Android之DOM解析XML

    一．DOM解析方法介绍 DOM是基于树形结构的节点或信息片段的集合,允许开发人员使用DOM API遍历XML树,检索所需数据.分析该结构通常需要加载整个文档和构造树形结构,然后才可以检索和更新节点信息 ...

  3. 【JAVA解析XML文件实现CRUD操作】

    一.简介. 1.xml解析技术有两种:dom和sax 2.dom:Document Object Model,即文档对象模型,是W3C组织推荐的解析XML的一种方式. sax:Simple API f ...

  4. xml语法、DTD约束xml、Schema约束xml、DOM解析xml

    今日大纲 1.什么是xml.xml的作用 2.xml的语法 3.DTD约束xml 4.Schema约束xml 5.DOM解析xml 1.什么是xml.xml的作用 1.1.xml介绍 在前面学习的ht ...

  5. C# 使用XmlDocument类对XML文档进行操作

    原创地址:http://www.cnblogs.com/jfzhu/archive/2012/11/19/2778098.html 转载请注明出处 W3C制定了XML DOM标准.很多编程语言中多提供 ...

  6. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  7. dom解析xml随笔

    1.dom解析jar包准备: dom解析需用到dom4j的jar包,比如我在项目中用到的的是dom4j-1.6.1jar,因为项目用的是MAVEN,所以可直接到maven中央库去搜索相关pom坐标配置 ...

  8. 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. 使用DOM解析xml文件

    使用DOM解析xml文件 要解析的xml文件如下: <?xml version="1.0" encoding="UTF-8"?> <Langu ...

随机推荐

  1. Hive中集合类型

    Hive中集合类型 创建表,集合是以 - 分割的 数据文件 加载数据 查询数据 查询数组中第一个字段 再建一个表,使用map 查看数据文件 加载数据 查询数据 查询键值 创建表,struct类型 查看 ...

  2. js---post与get请求的区别

    request获取请求参数 最为常见的客户端传递参数方式有两种: 浏览器地址栏直接输入:一定是GET请求: 超链接:一定是GET请求: 表单:可以是GET,也可以是POST,这取决与<form& ...

  3. 算法理论——PLA

    全称 perceptron learning algrithm 用武之地 二值分类问题,资料线性可分 算法核心(以二维平面为例) 找到一条直线WTX=0,一边全为+1,另一边全为-1.找到了这条线(即 ...

  4. 【bzoj4269】再见Xor 高斯消元求线性基

    题目描述 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. 输入 第一行一个正整数N. 接下来一行N个非负整数. 输出 一行,包含两 ...

  5. kb-07线段树--11--区间多重该值多种查询

    /* lazy思想的运用,因为查询多种,如果全记录就太繁了,lazy就是如果该区间的每一个叶子的状态都相同就不用深入下去该值,只要暂时标记下,查询的时候也不用下去,直接计算: */ #include& ...

  6. 学习 WebService 第三步：一个简单的实例（SoapUI测试REST项目）

    原文地址:SOAPUI测试REST项目(六)——REST服务和WADL ↑↑↑ 原文用的SoapUI,2018-3-19时,这个软件已经更名为ReadyAPI(集成了SoapUI),因此下文中我重新截 ...

  7. 百度网络监控实战：NetRadar横空出世（上）

    原文:https://mp.weixin.qq.com/s/VBShicsqReDtureKAdEgDA 转自订阅号「AIOps智能运维」,已授权运维帮转发 作者简介:运小贝,百度高级研发工程师 负责 ...

  8. d3 svg简单学习

    矩形 <rect x="/> 圆形 <circle cx="/> 椭圆 <ellipse cx="/> 线 <line x1=& ...

  9. hdu 1250 树形DP

    Anniversary party Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  10. 线段树懒标记好题 HDU4578

    (1)"1 x y c",代表 把区间 [x,y] 上的值全部加c (2)"2 x y c",代表 把区间 [x,y] 上的值全部乘以c (3)"3 ...