元素节点应用：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
//为Id为btn01的按钮绑定一个单击响应函数
var btn1 = document.getElementById("btn01");
btn1.onclick = function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02")
btn02.onclick = function(){
//查找所以的li节点
var lis = document.getElementsByTagName("li");
//打印lis
alert(lis.length);
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
var btn03 = document.getElementById("btn03")
btn03.onclick = function(){
var inputs = document.getElementsByName("gender");
for(var i = 0;i< inputs.length;i++){
alert(inputs[i].value);
}
}
//为id为gtn04的按钮来绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
alert(lis[0].innerHTML);
}
//为id为gtn05的按钮来绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
var city = document.getElementById("city");
/* var lis = city.childNodes; */
var lis = city.children;
alert(lis.length);
}
//为id为gtn06的按钮来绑定一个单击响应函数
var btn06 = document.getElementById("btn06")
btn06.onclick = function(){
var phone = document.getElementById("phone");
var fir = phone.firstChild;
alert(fir.innerHTML); }
//为id为gtn07的按钮来绑定一个单击响应函数
myClick("btn07",function(){
var bj = document.getElementById("bj")
var parent = bj.parentNode;
alert(parent.innerText);
})
//为id为gtn08的按钮来绑定一个单击响应函数
myClick("btn08",function(){
var and = document.getElementById("android");
var pre = and.previousSibling;
alert(pre.innerText);
})
/* myClick("btn09",function(){
var and = document.getElementById("android");
var next = and.nextSibling;
alert(next.innerText);
}) */
//读取#username的value属性值
myClick("btn09",function(){
var um = document.getElementById("username");
alert(um.value);
})
myClick("btn10",function(){
var um = document.getElementById("username");
um.value = "今天天气真不错"
alert(um.value);
})
myClick("btn11",function(){
var bj = document.getElementById("bj");
alert(bj.innerText);
})
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde777"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
