<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var forms=document.forms;
var all=document.all;
// alert(all.length)
var frm1=document.getElementById("frm1");
var attr=frm1.getAttribute("data"); //获取属性值 设置属性值setAttribute(name,value)
// alert(attr);
var inputs=document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
// alert(inputs[i].getAttribute("value"));
};
var oul=document.getElementById("script");
if(oul.lastElementChild){ //谷歌 FF 浏览器兼容 下同 中间要加一个Element 最后一个子元素
// alert(oul.lastElementChild.getAttribute("name"));
}else{
// alert(oul.lastChild.getAttribute("name"))//兼容IE;
}
var oli=oul.children;
for (var i = 0; i < oli.length; i++) {
//alert(oli[i].innerHTML);
};
//alert(oul.parentNode.getAttribute("name")) //获取父级name属性值；
if(oul.nextElementSibling){
// alert(oul.nextElementSibling.getAttribute("name"));
}else{
// alert(oul.nextSibling.getAttribute("name"));//获取下一个同级元素的属性
}
if(oul.previousElementSibling){
// alert(oul.previousElementSibling.getAttribute("name"));// 上1个节点
}else{
// alert(oul.previousSibling.getAttribute("name"));
}
var oll=document.createElement("li");
var textNode1=document.createTextNode("<a href=''>sadasd</a>");
// alert(textNode1.nodeValue);//createTextNode原文输出textNode1的文本 浏览器不翻译
oll.appendChild(textNode1);//append追加到oli子元素的最后面 一般直接oli.innerHTML就获取值了
//alert(oll.innerHTML);
var oliu=document.createElement("li");
var oliu2=document.createElement("li");
var oliu4=document.createElement("li");
oliu.innerHTML="222222";
oliu2.innerHTML="222222223";
oliu4.innerHTML="换了";
var parentnode=document.getElementById("db");
// ochildren=parentnode.children[2];
// alert(ochildren.innerHTML);
parentnode.appendChild(oliu);
parentnode.insertBefore(oliu2,oliu);
parentnode.replaceChild(oliu4,parentnode.firstElementChild);//替换某个子元素
parentnode.removeChild(oliu2);//删掉某个子元素;
//alert(parentnode.querySelector("body #db3").innerHTML)// IE8/9及Firefox/Chrome/Safari/Opera支持 获取制定ID,class的子元素
}
</script>
</head>
<body>
<div id="title">用户登录</div>
<div id="form"></div>
<form id="frm1" name="frm11">
<input type="text" name="username"/><br/>
<input type="password" name = "psd"/><br/>
<input type="button" value="submit"/>
</form>
<p>
<a>a</a>
<a>b</a>
<a>c</a>
</p>
<div id="testNode" name="testNode">
<ul id="develop" name="develop">
<li id="java">java</li>
<li>c</li>
<li>c++</li>
<li>.net</li>
<li>c#</li>
</ul>
<ul id="script" name="script">
<li name="cc">js</li>
<li>perl</li>
<li>php</li>
<li name="dd">python</li>
</ul>
<ul id="db" name="db">
<li class="db1">mysql</li>
<li class="db2">oracle</li>
<li id="db3">db2</li>
</ul>
</div>
</body>
</html>
