DOM学习

zhangwenzhuo · 发表于 2013-1-27 05:43:54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>遍历文档的节点</title>
<script language="javascript"  type="text/javascript" >
var elementName="";
function countTotalElement(node) {
var total=0;
if(node.nodeType==1){
total++;
elementName=elementName+node.tagName+"\r\n";
}
var childrens=node.childNodes;
for(var i=0;i<childrens.length;i++) {
total+=countTotalElement(childrens[i]);
}
return total;
}

</script>
</head>
<body>

<table width="100" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td>
<form name="form1" action="" method="post" >
<input type="text" name="input1" value=""><br/>
<input type="password" name="input2" value="">
</form>
</td>
</tr>

</table>

<a href="javascript:void(0)" >开始统计</a>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>定位HTml文档特定节点</title>
<script language="javascript"  type="text/javascript" >
//to count input
function countTotal(){
var elements=document.getElementsByTagName("input");
window.alert("input 类型的控件总数为:"+elements.length);

}

function anchorElement() {
var element=document.getElementById("submit1");
window.alert("控件value设置值为:"+element.value);

}

</script>
</head>
<body>
<form name="form1" method="post" action="" >
<input type="text" name="input1" id="input1" value="">
<span id="input1">文本输入框</span><br>
<input type="password" name="password1" id="password1" value="">
<span id="password1">密码输入框</span><br>
<input type="submit" name="submit1" value="提交" id="submit1">

</form>
<br>
<a href="javascript:void(0)"  >统计</a><br/>

<a herf="javascript:void(0)"  >定位提交按钮</a>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>颠倒节点顺序</title>
<script language="javascript"  type="text/javascript" >
function reverseNode(node) {
var kids=node.childNodes;
var kidNum=kids.length;
for(var i=kidNum-1;i>=0;i--) {
var c=node.removeChild(kids[i]);
node.appendChild(c);

}
}

</script>
</head>
<body>
<p>one</p>
<p>two</p
<p>three</p>
<p>
<input type="button" name="reverseGo" value="颠倒"  >
</p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>颠倒表格顺序</title>
<script language="javascript"  type="text/javascript" >
function reverseTable() {
var node=document.getElementsByTagName("table")[0];
var child=node.getElementsByTagName("tr");
var newChild=new Array();
for(var i=0;i<child.length;i++){
newChild[i]=child[i].firstChild.innerHTML;

}
node.removeChild(node.childNodes[0]);
var header=node.createTHead();
for(var i=0;i<newChild.length;i++){
var headerrow=header.insertRow(i);
var cell=headerrow.insertCell(0);
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));

}

}

</script>
</head>
<body>

<table width="200" border="1" cellpadding="4" cellspacing="0">
<thead>
<tr><td height="25">the first row</td></tr>
<tr><td height="25">the second row</td></tr>
<tr><td height="25">the third row</td></tr>
<tr><td height="25">the fourth row</td></tr>

</thead>

</table>
<br>
<input type="button" name="reverse" value="开始颠倒" >

</body>
</html>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>添加表格内容</title>
<script language="javascript"  type="text/javascript" >
function insertStr(){
var f=document.form1;
var value=f.str.value;
if(value!="") {
var text=document.createTextNode(value);
var td=document.createElement("td");
var tr=document.createElement("tr");
var tbody=document.createElement("tbody");
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr);

var parNode=document.getElementById("table1");
//parNode.insertBefore(tbody,parNode.firstChild);
parNode.appendChild(tbody);

}

}

</script>
</head>
<body>

<form name="form1" method="post" action="" >
<input name="str" type="text" id="str" >
<input name="insert" type="button" id="insert" value="留言"  >
</form>

<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
<tbody
></tbody>
<tr>
<td height="25" >网友留言列表</td>
</tr>

</table>

</body>
</html>

		自动登录	找回密码
密码			立即注册

DOM学习

浏览过的版块