Javascript操作XML,HTML - 第二部分,HTML - 1
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> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
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> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>