<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
// 为id为btn04的按钮绑定一个单击响应函数
var btn04=document.getElementById('btn04');
btn04.onclick=function(){
//查找#city下所有li节点
// 1.获取id为city的元素
var city =document.getElementById('city');
// document.getElementsByTagName('li'); //这样写不行，获取页面当中的所有li
var lis = city.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
var btn05=document.getElementById('btn05');
btn05.onclick=function(){
var city =document.getElementById('city');
/*
* childNodes 属性会包括文本节点
* 根据DOM标签空白也会当成文本节点
* 在IE８及以下返回４个子元素
*/
var cns = city.childNodes;
// alert(cns.length);
// for(var i=0;i<cns.length;i++){
// alert(cns[i]);
// }
// children 包括子元素，不包括空白
// 该属性可以获取到当前元素的所有子元素 元素就是标签
var cns2=city.children;
alert(cns2.length)
}
var btn06=document.getElementById('btn06');
btn06.onclick=function(){
var city =document.getElementById('phone');
// 返回#phone的第一个子节点 一说节点就包括空白的文本
//phone.childNodes[0];
// firstChild可以获取到当前元素的第一个节点(包括空白文本节点)
var fir = phone.firstChild;
alert(fir.innerHTML);
// fir = phone.firstElementChild 不建议使用
}
}
</script>
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li>东京</li>
<li>首尔</li>
</ul>
<ul id="phone"><li>IOS</li></ul>
<button id="btn04">点击</button>
<button id="btn05">点击</button>
<button id="btn06">点击</button>
</body>
</html>