ajax——dom对xml和html的操作
上篇文章说到了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的操作的更多相关文章
- 使用DOM进行xml文档的crud(增删改查)操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
- Android之DOM解析XML
一.DOM解析方法介绍 DOM是基于树形结构的节点或信息片段的集合,允许开发人员使用DOM API遍历XML树,检索所需数据.分析该结构通常需要加载整个文档和构造树形结构,然后才可以检索和更新节点信息 ...
- 【JAVA解析XML文件实现CRUD操作】
一.简介. 1.xml解析技术有两种:dom和sax 2.dom:Document Object Model,即文档对象模型,是W3C组织推荐的解析XML的一种方式. sax:Simple API f ...
- 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 ...
- C# 使用XmlDocument类对XML文档进行操作
原创地址:http://www.cnblogs.com/jfzhu/archive/2012/11/19/2778098.html 转载请注明出处 W3C制定了XML DOM标准.很多编程语言中多提供 ...
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- dom解析xml随笔
1.dom解析jar包准备: dom解析需用到dom4j的jar包,比如我在项目中用到的的是dom4j-1.6.1jar,因为项目用的是MAVEN,所以可直接到maven中央库去搜索相关pom坐标配置 ...
- 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 使用DOM解析xml文件
使用DOM解析xml文件 要解析的xml文件如下: <?xml version="1.0" encoding="UTF-8"?> <Langu ...
随机推荐
- 玩App怎么赚钱(二)
紧接上篇文章,谈到App前赚钱的一些门道,其实还有很多了,需要你自己去挖掘App到底有什么价值.有价值的东西就能形成交易,而交易的过程中是用金钱作为流通手段,所以说赚钱没那么高大上,它的本质就是价值的 ...
- day01_02.php的开发环境准备
PHP开发环境的准备 此套课程推荐xampp,也就是Apache+Mysql+PHP 但是我自己的机器装的是wamp环境,稍微有一些不一样,但是不影响使用
- 01-python进阶-拾遗
列表复习append(x)追交到链尾extend(L)追加一个列表 等价于 +=insert(i,x)在位置i处插入xremove(x) 删除一个值为x的元素 如果没有抛出异常sort() 直接修改列 ...
- 让读者快速了解RocketMQ消息中间件需要解决哪些问题
本文首先引出消息中间件通常需要解决哪些问题,在解决这些问题当中会遇到什么困难,Apache RocketMQ作为阿里开源的一款高性能.高吞吐量的分布式消息中间件否可以解决,规范中如何定义这些问题.然后 ...
- [python学习篇 ] subprocess 子进程
http://www.cnblogs.com/vamei/archive/2012/09/23/2698014.html
- DS作业06-图
1.本周学习总结(0--2分) 1.1思维导图 1.2谈谈你对图结构的认识及学习体会. 图这一章的学习,是经过树学习后,难得一章重新寻找到感觉的学习.因为这一章比较少用递归,使用的是结构体,很多东西我 ...
- 【bzoj3566】[SHOI2014]概率充电器 树形概率dp
题目描述 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器:“采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率充电器,您生活不可或缺的 ...
- SJTU Summer Camp
Day -2,-1 提前坐飞机来到了上海,在旁边的酒店住下来,晚上去了外滩,在黄浦江边吹着晚风,依旧感慨万千,在衡中高三的一年竟然已经过去,经常出现在噩梦中的高考也已成为历史,然而命运可能并未就此改变 ...
- docker (centOS 7) 使用笔记2 - 使用nfs作为volume
本次测试的服务器2台,服务器#1(centos7)最为docker容器所在的host,服务器#2(centos6)提供NFS服务 1. #2上配置NFS服务 (1) 安装nfs软件包 yum -y i ...
- mysql监控指标
1.最大连接数监控 show VARIABLES like "max_connections"; //最大连接数 show global status like 'Threads_ ...