第一部分，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 οnclick="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 οnclick="gotoPreWorkArea()">上一个窗口</button> <button οnclick="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> </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' οnclick='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文件即可
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
