<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
// 为id为btn01的按钮绑定一个单击响应函数
var btn01=document.getElementById('btn01');
btn01.onclick=function(){
//查找#bj节点
var bj=document.getElementById('bj');
//打印北京
//innerHTML 通过这个属性可以获取到元素内部的html
alert(bj.innerHTML);
}
// 为id为btn02的按钮绑定一个单击响应函数
var btn02 =document.getElementById('btn02');
btn02.onclick=function(){
//查找所有的li元素
// getElementsByTagName(); 通过标签名来获取一组元素的节点
// 这个方法可以给我们返回一个类数组对象 所有查询到的元素都会封装到对象中
// 即使查找到一个元素,也会封装到数组中返回
var lis =document.getElementsByTagName('li');
// 打印lis
// alert(lis.length);
// 遍历lis中的内容
for(var i=0;i<lis.length;i++){
// 查看li标签当中的内容
alert(lis[i].innerHTML);
}
}
// 为id为btn02的按钮绑定一个单击响应函数
var btn03 =document.getElementById('btn03');
// 点查找name等于gender所有的节点
btn03.onclick=function(){
var inputs =document.getElementsByName('gender');
// alert(inputs.length);
for(var i=0;i<inputs.length;i++){
/*
// * innerHTML用于获取元素内部的HTML代码的
对于自结束标签，这个属性没有意义
alert(inputs[i].innerHTML);
*/
/*
* 如果需要读取元素节点属性，直接使用元素.属性名
* 例子： 元素 .id 元素.name 元素.value
* 注意：class属性不能采用这种方式
* 读取class属性时需要使用元素.className
*/
alert(inputs[i].value);
alert(inputs[i].className);
}
}
}
</script>
</head>
<body>
<ul id="cy">
<li id="bj">北京</li>
<li>东京</li>
<li>首尔</li>
</ul>
<ul id="city">
<li id="bj">北京</li>
<li>东京</li>
<li>首尔</li>
</ul>
<input class="hello" name="gender" type="text" value="文本框"/>
<input name="gender" type="checkbox" value="复选框"/>
<input name="gender" type="password" value="密码"/>
<button id="btn01">点击</button>
<button id="btn02">点查找所有的li节点</button>
<button id="btn03">点查找name等于gender所有的节点</button>
</body>
</html>