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=”xiaoluo”;

 

 

//载入字符串

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=”xiaoluo”;

 

 

//将字符串创建为对象

xmlDoc.loadXML(xmlString);

 

 

//根元素

var root = xmlDoc.documentElement;

 

 

/*也可以加载外部文件

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

xmlDoc.load(xmlFile);

*/

 

 

4.举例

Test.htm:

测试

 

 

 

第二部分,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

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

多窗口演示 上一个窗口 下一个窗口
菜单管理 角色管理 测试模块标题的最大长度 link4 link5

 

 

 

代码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=""+sTitle+"　x";

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="