最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js操作xml与html详解
时间:2013-05-29 编辑:简简单单 来源:一聚教程网
一 什么是xml dom
•XML DOM 定义了访问和处理 XML 文档的标准方法。
•XML DOM 是用于获取、更改、添加或删除 XML 元素的标准
二 关于节点的概念
•整个文档是一个文档节点
•每个 XML 标签是一个元素节点
•包含在 XML 元素中的文本是文本节点
•每一个 XML 属性是一个属性节点
•注释属于注释节点
三 对xml进行解析
代码如下 | 复制代码 |
对xml进行解析(一)ie浏览器 •xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); •xmlDoc.async="false"; •xmlDoc.load("books.xml"); 对xml进行解析(二) •l xmlDoc=document.implementation.createDocument(); •xmlDoc.async="false"; •xmlDoc.load("books.xml"); //以下这种方式适用于IE浏览器 //实例化xmldom对象 var xmlDoc=new ActiveXObject('Microsoft.XMLDOM'); //关闭异步加载模式 xmlDoc.async=false; //加载xml文件,读取里面的数据 xmlDoc.load('demo14.xml');*/ //以下这种方式适用于非IE浏览器 /*var xmlDoc=document.implementation.createDocument("","",null); xmlDoc.async=false; xmlDoc.load('demo14.xml');*/ alert(xmlDoc); //最终我们得出结论: //在不同的浏览器下实例化xmldom的方式不同 |
四 封装
由于客户端使用的浏览器是未知的,所以我们写出具有兼容性的代码,也就是说:客户端浏览器使用哪种,代码就可以创建出相应的类对象
我们把这些代码封装到Public.js
代码如下 | 复制代码 |
function createXMLDocument(file){ var str=window.navigator.userAgent; var xmlDoc; if(str.indexOf('MSIE')>0){ xmlDoc=new ActiveXObject('Microsoft.XMLDOM'); } else{ xmlDoc=document.implementation.createDocument("","",null); } xmlDoc.async=false; xmlDoc.load(file); return xmlDoc; } |
调用代码:
五 获取节点
•nodeList getElementsByTagName(name)
通过节点(标签)名获取节点
返回值为一个节点组数
nodeList:节点数组
length:元素个数
六 常用属性
•nodeName :节点名称
•nodeValue :节点值
商品
•parentNode :父节点
•childNodes :子节点列表
•attributes :属性节点列表
•firstChild :第一个子节点
•lastChild :最后一个子节点
•nextSibling :下一个平辈节点
•previousSibling :上一个平辈节点
•documentElement :根节点
代码如下 | 复制代码 |
var xmlDoc=createXMLDocument('demo14.xml'); |
例题:通过以上的知识点完成对一个xml文档的遍历
代码如下 | 复制代码 |
var xmlDoc=createXMLDocument('demo14.xml'); var persons=xmlDoc.getElementsByTagName('person'); var count=persons.length; //取人数 document.write('共有'+count+'个人 '); for(var i=0;i document.write('id:'+persons[i].attributes[0].nodeValue); document.write(persons[i].childNodes[0].childNodes[0].nodeValue); document.write(persons[i].childNodes[1].childNodes[0].nodeValue); document.write(' '); } |
七 常用方法
1. 添加节点
代码如下 | 复制代码 |
createElement(tagName); 创建一个元素节点 |
2. 删除节点
代码如下 | 复制代码 |
removeChild(oldChild) |
3. 替换节点
代码如下 | 复制代码 |
replaceChild(newChild,oldChild); |
newChild:新节点
oldChild:原节点
代码如下 | 复制代码 |
var xmlDoc=createXMLDocument('demo14.xml'); var person=xmlDoc.createElement('person'); var name=xmlDoc.createElement('name'); var age=xmlDoc.createElement('age'); var nameValue=xmlDoc.createTextNode('黄六'); var ageValue=xmlDoc.createTextNode('30'); var id=xmlDoc.createAttribute('id'); var value=xmlDoc.createTextNode('s105'); id.appendChild(value); name.appendChild(nameValue); age.appendChild(ageValue); person.appendChild(name); person.appendChild(age); person.setAttributeNode(id); xmlDoc.documentElement.replaceChild(person,xmlDoc.documentElement.lastChild); |
4.克隆节点
cloneNode(true)
true:表示复制节点的子节点以及节点的值
5. removeAttribute(name)
-
下一个: js 正则实现查询关键字高亮显示
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31