選擇元素:document.getElementsByTagName,document.getElementsById,document.getElementsByName。
firstChild,lastChild,nextSibling,previousSibling
創建元素:document.createElement(),appendChild();
刪除元素:removeChild();
實例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無標題頁</title>
<style>
.txt{ color:Red; border:solid 1px #ff0000}
</style>
<script type="text/javascript">
function chElement()
{
var txtAry=document.getElementsByTagName("input");
document.getElementsByTagName
for(i=0;i<txtAry.length;i++)
{
alert(txtAry[i].id);
}
}
function crtElement()
{
var obCrt=document.getElementById("dvCreate");
var obTxt=document.createElement("input");
obTxt.type="text";
obTxt.id="crtTxt";
dvCreate.appendChild(obTxt);
}
function setAtr()
{
//var strColor="#ff0000";
// (document.body.bgColor=='#ffffff')?document.body.bgColor="#000000":document.body.bgColor=strColor;
var txtAry=document.getElementsByTagName("input");
for(i=0;i<txtAry.length;i++)
{
txtAry[i].className="txt";
}
}
</script>
</head>
<body>
<form id="form1" runat="server" name="cc">
<div id="dv0">
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="txt3" type="text" />
<input id="Button1" type="button" value="選擇" onclick="chElement()"/>
<input id="Button2" type="button" value="新建" onclick="crtElement()"/>
<input id="Button3" type="button" value="設置" onclick="setAtr()"/>
<div id="dvCreate">
</div>
</div>
</form>
</body>
</html>