Javascript操作XML,HTML(转载:罗代均)

第一部分,XML


Ok,先定义一个xml DOM对象e

 

1. 属性

e.childNodes 返回下级元素数组

e.firstChild 返回第一个下级元素

e.lastChild 最后一个下级元素

e.nextSibling 同级下一个元素

e.previousSibling 同级上一个元素

e.parentNode 返回父节点

e.nodeValue 当前元素的值,

e.text 当前元素(包括所有下级(递归)的文本,不包括tag,只有各节点的文本

e.xml 当前元素xml文本,包括tag

 

2.方法

e.selectSingleNode("XPATH"); //查找单个元素, 参数为XPATH

e.selectNodes(“XPATH”); //查找元素,返回数组

e.getElementById("id"); //根据id获得元素

e.getElementsByTagName("tagName"); //根据tag找到的元素数组

e.getAttribute("name"); //得到属性值

e.hasChildNodes(); //是否有下级元素

e.removeChild(element); //删除下级元素

e.appendChild(element); //添加下级元素

e.cloneNode(true); //克隆节点

e.replaceChild(newNode,oldNode);

 

3.创建xml DOM对象


3.1 XMLHTTP

//XMLHTTP对象

var xmlHttp = ….

 

 

//用responseXML返回xml DOM对象,responseText返回文本

 

 

var e=xmlHttp.responseXML;

 

 

3.2 IE下将字符串转为DOM对象
//创建DOM对象

var xmlDoc = new ActiveXObject("MSXML.DOMDocument");

 

 

var xmlString=”<book><title>ajax</title><author>xiaoluo</author></book>”;

 

 

//载入字符串

xmlDoc.loadXML(xmlString);

 

 

//根元素

var root = xmlDoc.documentElement;

 

 

/*也可以加载外部文件

var xmlFile=”c:/book.xml”);

xmlDoc.load(xmlFile);

*/

3.3 Firefox下将字符串转为DOM对象
//创建DOM对象

var xmlDoc = document.implementation.createDocument("", "doc", null);

 

 

var xmlString=”<book><title>ajax</title><author>xiaoluo</author></book>”;

 

 

//将字符串创建为对象

xmlDoc.loadXML(xmlString);

 

 

//根元素

var root = xmlDoc.documentElement;

 

 

/*也可以加载外部文件

var xmlFile=”c:/book.xml”);

xmlDoc.load(xmlFile);

*/

 

 

4.举例


Test.htm:

<html>

<head>

<title>dds</title>

<script lanjuage="javascript">


function test(){

//创建DOM对象

var xmlDoc = new ActiveXObject("MSXML.DOMDocument");


var xmlString="<book id='007'><title>ajax</title><author>xiaoluo</author></book>";

 

 

//将字符串创建为对象

xmlDoc.loadXML(xmlString);


//根元素

var root=xmlDoc.documentElement;


//到root的值

alert(root.xml); //结果:<book id='007'><title>ajax</title><author>xiaoluo</author></book>

alert(root.text); //结果:ajaxxiaoluo,可以看到,区别是tag没有了,只有所有的文本

alert(root.nodeValue);//结果;null


//得到book的id属性

var att=root.getAttribute("id");

alert(att); //结果:007


//下级元素的个数

var length=root.childNodes.length;

alert(length); //结果:2


//第一个下级元素

var title=root.childNodes[0];

alert(title.nodeValue); //结果:ajax

alert(title.text); //结果:ajax


//第二种方式得到第一个下级元素

var title2 = root.firstChild;

alert(title2.nodeValue); //结果:ajax

alert(title2.text); //结果:ajax


//查找title节点,返回数组,这里取第一个

var title3=root.selectNodes("title")[0]; //从root所在book节点往下看,全路径为title,也可以用任意路径selectNodes("//title");

alert(title3.text); //结果:ajax


//查找单个的title节点

var title4=root.selectSingleNode("title");//也可用任意路径//title;

alert(title4.text); //结果:ajax


//查找title节点的第三种方式,返回数组,这里取第一个

var title5=root.getElementsByTagName("title")[0];

alert(title5.text); //结果:ajax


//得到父节点

var root2=title.parentNode;

alert(root2.xml); //结果:<book id='007'><title>ajax</title><author>xiaoluo</author></book>


//替换节点author,这里用title节点来替换

var oldNode=root.childNodes[1];//得到author节点

var newNode=title.cloneNode(true); //克隆节点title

root.replaceChild(newNode,oldNode);

alert(root.xml);//结果:<book id='007'><title>ajax</title><title>ajax</title></book>


//增加一个节点

var addNode=title.cloneNode(true);

root.appendChild(addNode);

alert(root.xml);//结果:<book id='007'><title>ajax</title><title>ajax</title><title>ajax</title></book>


//删除一个节点

var removeNode=root.childNodes[2];

root.removeChild(removeNode);

alert(root.xml);

}

</script>

</head>

<body>

<button onclick="test()">测试</button>

</body>

</html>

 

 

 

第二部分,HTML



1.属性


xml DOM的属性和方法都有

oNode.nodeName; //节点名,

oNode.parentNode; //注意,tr的parentNode是tbody

oNode.innerHTML; //可读写,节点的内容

oNode.className; //注意,不是class

oNode.attachEvent(“onclick”,myOnClick); //onclick事件的处理函数为myOnclick

event.keyCode; //按键code

event.srcElement; //事件发生的源对象,比如你在td上触发事件,源对象就是这个td


//显示隐藏,table,tr,td,div...都可以

oNode.style.display=”block”; //显示

oNode.style.display=”none”; //隐藏

 

 

//table属性

oTable.rows; //table的行tr,数组

oTable.rows.item(0); //第一行

 

 

//tr属性

oTr.cells; //tr的单元格td,数组

oTr.cess.item(0);//第一个单元格

//取单元格的值

var tables=document.getElementById(“id”);

tables.rows.item(行号).cells.item(列号).innerText;

 

2.方法

Xml DOM操作的方法基本都有

//创建元素

var newNode=document.createElement(“div”);//创建一个div元素

//将这个div放到某个td里

var oTd=document.getElementById(“id”);

oTd.appendChild(newNode);


//table的方法

oTable.insertRow(); //新增行

oTable.deleteRow(0); //删除第1行


//tr的方法

oTr.insertCell(); //新增单元格

oTr.deleteCell(0); //删除第1个单元格

 

 

3.操作select


3.1动态创建select

 


function createSelect(){

 

 

var mySelect = document.createElement("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect);

}

 

 

3.2添加选项option

 


function addOption(){

 

 

//根据id查找对象,

var obj=document.getElementById('mySelect');

 

 

//添加一个选项

obj.add(new Option("文本","值"));

}

 

 

3.3 删除所有选项option

 


function removeAll(){

var obj=document.getElementById('mySelect');


obj.options.length=0;

 

 

}

 

 

3.4删除一个选项option

 


function removeOne(){

var obj=document.getElementById('mySelect');

 

 

//index,要删除选项的序号,这里取当前选中选项的序号

 

 

var index=obj.selectedIndex;

obj.options.remove(index);

}

 

 

3.5获得选项option的值

 


var obj=document.getElementById('mySelect');

 

 

var index=obj.selectedIndex; //序号,取当前选中选项的序号

 

 

var val = obj.options[index].value;

 

 

3.6获得选项option的文本

 


var obj=document.getElementById('mySelect');

 

 

var index=obj.selectedIndex; //序号,取当前选中选项的序号

 

 

var val = obj.options[index].text;

 

 

3.7修改选项option

 


var obj=document.getElementById('mySelect');

 

 

var index=obj.selectedIndex; //序号,取当前选中选项的序号

 

 

var val = obj.options[index]=new Option("新文本","新值");

 

 

3.8删除select

 


function removeSelect(){

var mySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

}

 

 

4.例子


先看看效果,单击 x 关闭窗口

代码1:

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<script language="javascript" src="index.js"></script>

<link href="css.css" rel="stylesheet" type="text/css">

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="100" colspan="2"><p>多窗口演示</p>

<p> <button onclick="gotoPreWorkArea()">上一个窗口</button> <button onclick="gotoNextWorkArea()">下一个窗口</button></p></td>

</tr>

<tr>

<td width="14%" height="456" valign="top">

<p><a href="#" onClick="addWorkArea('菜单管理','link1.htm')">菜单管理</a></p>

<p><a href="#" onClick="addWorkArea('角色管理','link2.htm')">角色管理</a></p>

<p><a href="#" onClick="addWorkArea('测试模块标题的最大长度','link3.htm')">测试模块标题的最大长度</a></p>

<p><a href="#" onClick="addWorkArea('link4','link4.htm')">link4</a></p>

<p><a href="#" onClick="addWorkArea('link5','link5.htm')">link5</a></p> </td>

<td width="86%" height="211" valign="top">

<table width="100" border="0" cellspacing="0" cellpadding="0">

<tr id="tabs">

<td height="20"></td>

</tr>

</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="panels">

<tr>

<td>&nbsp;</td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

 

 

 

代码2

index.js

 

 

//当前活动的工作区id

var currWorkAreaId=0;

 

 

//最多能打开的工作区数量

var MAX_WORKAREA_NUM=5;

 

 

//增加工作区

function addWorkArea(sTitle,sURL){

var tabs=document.getElementById("tabs");

if(tabs.cells.length>MAX_WORKAREA_NUM){

alert("最多能打开5个窗口!");

return false;

}

hiddenWorkArea(currWorkAreaId);

addTab(sTitle,sURL);

addPanel(sTitle,sURL);

}

 

 

//增加选项卡tab

function addTab(sTitle,sURL){

var tabs=document.getElementById("tabs");

tabs.parentNode.parentNode.width=100*tabs.cells.length;

var oCel=tabs.insertCell();

oCel.className="tab_active";

oCel.noWrap = true;

oCel.title = sTitle;

oCel.height=25;

oCel.attachEvent("onclick",tabOnclick);

if(sTitle.length>8){

sTitle=sTitle.substring(0,8)+"...";

}

oCel.innerHTML="<span width='100'>"+sTitle+" </span><span width='20' align='right' onclick='closeWorkArea()' >x</span>";


currWorkAreaId=oCel.cellIndex;

}

 

 

//增加工作区内容

function addPanel(sTitle,sURL){

var panels=document.getElementById("panels");

var oRow=panels.insertRow();

var oCel=oRow.insertCell();


var s_h = window.screen.availHeight;

var w_top = window.screenTop;

oCel.title = sTitle;

oCel.innerHTML="<iframe frameBorder='0' width='100%' height='"+(s_h-w_top-160)+"' src='"+sURL+"'/>";

}

 

 

//隐藏工作区

function hiddenWorkArea(iWorkAreaId){

if(currWorkAreaId>0){

var tabs=document.getElementById("tabs");

var oCel=tabs.cells.item(iWorkAreaId);

var panels=document.getElementById("panels");

var oRow=panels.rows.item(iWorkAreaId);

if(oCel){

oCel.className="tab_inActive";

}

if(oRow){

oRow.style.display="none";

}

}

}

 

 

//选项卡tabl单击触发事件

function tabOnclick(){

var obj = event.srcElement;

if(obj.nodeName != "TD"){

obj = obj.parentNode;

}

var celIndex=obj.cellIndex;

hiddenWorkArea(currWorkAreaId);

showWorkArea(celIndex);

}

 

 

//设置活动工作区

function showWorkArea(iWorkAreaId){

if(iWorkAreaId>0){

var tabs=document.getElementById("tabs");

var oCel=tabs.cells.item(iWorkAreaId);

var panels=document.getElementById("panels");

var oRow=panels.rows.item(iWorkAreaId);

if(oCel){

oCel.className="tab_active";

}

if(oRow){

oRow.style.display="block";

}


currWorkAreaId=iWorkAreaId;

}

}

 

 

//关闭工作区

function closeWorkArea(){

var obj = event.srcElement;

if(obj.nodeName != "TD"){

obj = obj.parentNode;

}

var celIndex=obj.cellIndex;


if(currWorkAreaId==celIndex){

hiddenWorkArea(currWorkAreaId);

showWorkArea(celIndex-1);

}


var tabs=document.getElementById("tabs");

tabs.deleteCell(celIndex);

var panels=document.getElementById("panels");

panels.deleteRow(celIndex);

if(tabs.cells.length>1){

tabs.parentNode.parentNode.width=100*(tabs.cells.length-1);

}else{

tabs.parentNode.parentNode.width=100;

}

}

 

 

//设置上一个工作区为活动工作区

function gotoPreWorkArea(){

if(currWorkAreaId>1){

hiddenWorkArea(currWorkAreaId);

showWorkArea(currWorkAreaId-1);

}

}

 

 

//设置下一个工作区为活动工作区

function gotoNextWorkArea(){

var tabs=document.getElementById("tabs");

if(currWorkAreaId<tabs.cells.length-1){

hiddenWorkArea(currWorkAreaId);

showWorkArea(currWorkAreaId+1);

}

}

 

 

 

代码3

css.css样式表文件

.tab_active {

background-repeat: repeat-x;

border: 1px groove #3366CC;

background-color: #FF6600;

}

.tab_inActive {

background-repeat: repeat-x;

border: 1px ridge #3333CC;

background-color: #669900;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

 

 

link1.htm

link2.htm

link3.htm

link4.htm

link5.htm任意弄几个htm文件即可

阅读更多
个人分类: other
想对作者说点什么? 我来说一句

Javascript操作XMLHTML

2009年11月22日 98KB 下载

javascript 操作xml

2010年09月02日 29KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭