上篇文章说到了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字符串。

  1. /*
  2.  * 封装IE和firefox类浏览器中装载同域xml文件和xml字符串的方法,返回的是xml对象dom对象中的根元素节点
  3.  * @param flag true装载xml的文件，false表达式装载xml字符串
  4.  * @param xmldoc flag为false装载xml文件的路径，flag为false表示xml字符串
  5.  */
  6. function loadXML(flag,xmldoc){
  7.     if (window.ActiveXObject) {
  8.         //IE浏览器
  9.         var activexName = ["MSXML2.DOMDocument", "Miscrosoft.XmlDom"];
  10.         var xmlObj;
  11.         for (var i = 0; i < activexName.length; i++) {
  12.             try {
  13.                 xmlObj = new ActiveXObject(activexName[i]);
  14.                 break;
  15.             } catch (e) {
  16.  
  17.             }
  18.         }
  19.  
  20.         if (xmlObj) {
  21.             //同步方式装载xml数据
  22.             xmlObj.async = false;
  23.             if (flag) {
  24.                 //装在xml文件
  25.                 xmlObj.load(xmldoc);
  26.             } else {
  27.                 //装载xml的字符串
  28.                 xmlObj.loadXML(xmldoc);//解析一个 XML 标签字符串来组成该文档
  29.             }
  30.             //返回根元素节点
  31.             return xmlObj.documentElement;
  32.         } else {
  33.             alert("装载xml文档的对象创建失败。
  34.  
  35. ");
  36.             return null;
  37.         }
  38.     } else if (document.implementation.createDocument) {        //创建一个新 Document 对象和指定的根元素。
  39.         //针对firfox浏览器
  40.         var xmlObj;
  41.         if (flag) {
  42.             //装载xml文件
  43.             xmlObj = document.implementation.createDocument("", "", null);//创建一个新 Document 对象和指定的根元素。
  44.             if (xmlObj) {
  45.                 //同步方式装载
  46.                 xmlObj.async = false;
  47.                 xmlObj.load(xmldoc);
  48.                 return xmlObj.documentElement;
  49.             }
  50.         } else {
  51.             //装载xml的字符串
  52.             xmlObj = new DOMParser();   //DOMParser 对象解析 XML 文本并返回一个 XML Document 对象
  53.             var docRoot = xmlObj.parseFromString(xmldoc, "text/xml");//解析 XML 标记
  54.             return docRoot.documentElement;
  55.         }
  56.     }
  57.     alert("装载xml文档的对象创建失败。");
  58.     return null;
  59. }

xml文档

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <books>
  3.     <book>
  4.         <author>Peter</author>
  5.         <name>Hello Ajax</name>
  6.     </book>
  7.     <book>
  8.         <author>Jack</author>
  9.         <name>Ajax Puzzle</name>
  10.     </book>
  11. </books>

dom操作xml文档

  1.             function test(){
  2.                 var rootElement=loadXML(true,"TestBook.xml");  //装载xml文档，并返回xml dom对象的根元素节点
  3.                 var rootDocument=rootElement.parentNode;  //找到父节点
  4.                 var bookElement=rootDocument.createElement("book");//创建book节点
  5.                 var textNode=rootDocument.createTextNode("AJAX Hello");
  6.                 bookElement.appendChild(textNode);  //在bookElement后加入文本节点
  7.                 rootElement.appendChild(bookElement);//在文本节点后加入
  8.                 var bookElements=rootElement.getElementsByTagName("book");  //返回全部的book节点
  9.                 alert("");
  10.             }

dom操作html

html文档

  1. <html>
  2.     <head>
  3.         <title>TODO supply a title</title>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     </head>
  7.     <body>
  8.         <input type="button" value="TestDomApi" onclick="testDomApi()"/>
  9.         <div id="div1">123123</div>
  10.         <input type="text" id="inputtext"/>
  11.         <div id="div2">
  12.             456
  13.             <div>
  14.                 789
  15.             </div>
  16.         </div>
  17.         <input type="button" value="textclick" id="clic"/>
  18.     </body>
  19. </html>

利用根节点的属性和方法操作html文档。能够创建元素节点，文本节点，元素节点。

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

利用元素节点的属性和方法操作html文档。能够去操作元素节点的属性。

  1.                 //返回大写的标签名
  2.                 var tagName=divNode.tagName;
  3.                 //依据标签名获取元素节点
  4.                 var divNode2=document.getElementById("div2");
  5.                 var divNodes2=document.getElementsByTagName("div");
  6.                 //操作属性
  7.                 var inputtext=document.getElementById("inputtext");
  8.                 var flag=inputtext.hasAttribute("value");//推断是否有这个属性
  9.                 inputtext.setAttribute("value","textTest");//设置属性
  10.                 var textValue=inputtext.getAttribute("value");//获取属性值
  11.                 inputtext.removeAttribute("value");//移除属性值
  12.  
  13.                 //还有一种属性的操作
  14.                 inputtext.value="121212";
  15.                 var textValue2=inputtext.value;
  16.  
  17.                 var clic=document.getElementById("clic");
  18.                 clic.onclick=function(){alert("12")};

利用全部节点都拥有的的属性和方法操作html文档。能够管理html文档的全部节点的。

  1.                 var divNode2=document.getElementById("div2");
  2.                 var inputtext=document.getElementById("inputtext");
  3.                 //返回元素节点上的包括的属性节点
  4.                 var attributs=inputtext.attributes;
  5.                 //nodeName nodeValue nodeType
  6.                 var inputname=inputtext.nodeName;
  7.                 var nodetype=inputtext.nodeType;
  8.                 var nodevalue=inputtext.nodeValue;
  9.  
  10.                 //返回全部子节点
  11.                 var childs=divNode2.childNodes;
  12.                 //获取父节点
  13.                 var parent=divNode2.parentNode;
  14.                 //获取第一个节点和最后一个节点
  15.                 var first=divNode2.firstChild;
  16.                 var last=divNode2.lastChild;
  17.                 //获取兄弟节点
  18.                 var next=divNode2.nextSibling; //上一个兄弟节点
  19.                 var prev=divNode2.previousSibling;//下一个兄弟节点
  20.  
  21.                 //推断是否有子节点
  22.                 var flag2=divNode2.hasChildNodes();
  23.  
  24.                 //追加节点
  25.                 var new2=document.createElement("div");
  26.                 var text2=document.createTextNode("insert");
  27.                 new2.appendChild(text2);
  28.                 divNode2.insertBefore(new2,divNode2.firstChild);  //插入子节点并将子节点移动到第一位
  29.  
  30.                 var new3=document.createElement("div");
  31.                 var text3=document.createTextNode("insert3");
  32.                 new3.appendChild(text3);
  33.                 divNode2.insertBefore(new3,null);//插入子节点
  34.                 divNode2.insertBefore(new3,divNode2.firstChild);  //将子节点移动到第一位
  35.  
  36.                 //移除节点
  37.                 var remove=divNode2.removeChild(new3);
  38.                 //替换节点，用还有一个节点替换前节点的一个节点
  39.                 var text4=document.createTextNode("insert4");
  40.                 var new4=document.createElement("div");
  41.                 new4.appendChild(text4);
  42.                 var replace=divNode2.replaceChild(new4,divNode2.firstChild);
  43.                 var replace=divNode2.replaceChild(newDivNode,divNode2.firstChild);
  44.  
  45.                 //clone节点
  46.                 var clone1=divNode2.cloneNode(true);//克隆子节点
  47.                 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. Leetcode 437.路径总和III

    路径总和III 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点). ...

  2. SQL DML 和 DDL

    数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如“客户”或者“订单”).表包含带有数据的记录(行). 下面的例子是一个名为 "Persons" 的表: Id L ...

  3. java环境配置classpath和path变量的作用及设置方法

    1.path:指定cmd中命令执行文件所在的路径.比如javac.java两个可执行文件在jdk的bin目录下,如果path值含有这个bin目录,在cmd下执行这两个命令的时候就会到path指定的目录 ...

  4. 《人月神话》读书笔记（2）-week3

    为了确保团队中的每个人都能保持系统概念上的完整性,关于项目的书面规格说明是必不可少的.手册要描绘用户可见的一切,但不应支配实现的过程.光有规格说明也是不够的,会议也是必要的.书中提到的周例会会迅捷地给 ...

  5. 九度oj 题目1513：二进制中1的个数

    题目描述: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 输入: 输入可能包含多个测试样例. 对于每个输入文件,第一行输入一个整数T,代表测试样例的数量.对于每个测试样例输入为一个 ...

  6. 【转】关于AI的目标导向型行动计划

    作者:Brent Owens 目标导向型行动计划(简称GOAP)是一种能够轻松呈现给你的代理选择的AI系统,也是帮助你可以无需维持一个庞大且复杂的有限状态机而做出明智的决策的机器. 演示版本 在这一演 ...

  7. 算法复习——矩阵树定理（spoj104）

    题目: In some countries building highways takes a lot of time... Maybe that's because there are many p ...

  8. django获取前端有multiple属性的select的多选项

    author_list = request.POST.getlist('author_list') ###

  9. bzoj 2801 [Poi2012]Minimalist Security 设一个，求出所有

    题目大意 给出一个N个顶点.M条边的无向图,边(u,v)有权值w(u,v),顶点i也有权值p(i), 并且对于每条边(u,v)都满足p(u)+p(v)>=w(u,v). 现在要将顶点i的权值减去 ...

  10. HDU1936 [贪心+KMP] 点的区间覆盖

    每一行对话分别取匹配所有的表情 这样是一个n**2的匹配,可以用KMP 找出每行对话中的每个表情的左右端点 这样相当于就是问用最少多少个点 可以覆盖所有的区间(每个区间中放一个点表示覆盖) 贪心 按右 ...