注：具体视频教程可参考尚硅谷李立超老师教程(https://www.bilibili.com/video/BV1YW411T7GX?p=94)
本练习主要适用于初学者，我在源码中适当加入了文本注释以便初学者参考。
运行界面：
css文件：
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
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=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
/*
定义一个函数，专门用来指定元素绑定单击响应函数
参数：
idStr 要绑定单击响应函数的对象的id属性
fun 时间的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr, fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
//为id为btn01的按钮绑定一个单击事件
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//通过innerHTML属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//查找#bj节点
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组内
var lis = document.getElementsByTagName("li");
// alert(lis.length);
for(var i=0; i<lis.length; i++){
console.log(lis[i].innerHTML);
}
};
//查找所有#li节点
//查找name=gender的所有节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
var inputs = document.getElementsByName("gender");
console.log(inputs);
for(var i=0; i<inputs.length; i++){
console.log(inputs[i].value);
console.log(inputs[i].className);
}
/*
innerHTML用与获取元素内部的HTML代码的
对于自结束标签，这个属性没有意义
如果需要读取元素的属性值，直接使用
元素.属性名
例如： 元素.id 元素.name 元素.value
注意：class属性不能采用这种方式，
读取class属性时需要使用元素.className
*/
};
//查找#city下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
var citylis = document.getElementById("city").getElementsByTagName("li");
//以上语句可写为
//var city = documents.getElementById("city");
//var citylis = document.getElementsByTagName("li");
for(var i=0; i<citylis.length; i++){
console.log(citylis[i].innerHTML);
}
};
//返回#city的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//获取city节点
var city2 = document.getElementById("city");
//返回#city的所有子节点
/*
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签空间，空白也会当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
所以该属性在IE8中会返回4个子元素而其他浏览器是9个
children属性可以获取当前元素的所有子元素，不包括文本节点，且所有浏览器都兼容
*/
var cns = city2.childNodes;
console.log(cns.length);
for(var i=0; i<cns.length; i++){
console.log(cns[i].innerHTML);
}
var cns2 = city.children;
console.log(cns2.length);
};
//返回#phone的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
var phone = document.getElementById("phone");
//firstChild可以获取到当前元素的第一个子节点（包括空白文本）
//lastChild当前节点的最后一个子节点
var fp = phone.firstChild;
console.log(fp.innerHTML);
//firstElementChild获取当前元素的第一个子元素
// 注：该属性不兼容IE8以下的浏览器
var fp2 = phone.firstElementChild;
console.log(fp2.innerHTML);
};
//返回#bj的父节点
myClick("btn07", function(){
var bj = document.getElementById("bj");
//parentNode 获取一个元素的父元素
var fn = bj.parentNode;
//innerText 该属性可以获取到元素内部的文本内容
//它和innerHTML类似，不同的是它会自动将HTML去掉
console.log(fn.innerText);
});
//返回#android的前一个兄弟节点
var btn08 = document.getElementById("btn08");
btn08.onclick = function(){
var android = document.getElementById("android");
//previousSibling 前一个兄弟节点
//nextSibling 后一个兄弟节点
var ps = android.previousSibling;
//previousSibling 和 nextSibling 属性包含文本节点
console.log(ps.innerHTML);
//previousElementSibling 和 nextElementSibling获取前一个或后一个兄弟元素
//IE8及以下不兼容
var ps2 = android.previousElementSibling;
console.log(ps2.innerHTML);
var ps3 = android.nextElementSibling;
console.log(ps3.innerHTML);
};
//读取#username的value属性值
myClick("btn09", function(){
var username = document.getElementById("username");
var vl = username.value;
console.log(vl);
});
//设置#username的value属性值
myClick("btn10", function(){
var username2 = document.getElementById("username");
username2.value = "今天是个好日子";
});
//返回#bj的文本值
myClick("btn11", function(){
var bj2 = document.getElementById("bj");
// console.log(bj2.innerText);
// console.log(bj2.innerHTML);
//获取bj中的文本节点
//每一个节点都包含的三个属性：nodeType、nodeName、nodeValue
var fc = bj.firstChild;
console.log(fc.nodeValue);
console.log(fc.nodeName);
});
};
</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="abcde"/>
</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>
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
