这是我参与「第四届青训营 」笔记创作活动的第7天
对于DOM编程，结合其他网站的资料，进行知识点总结以及如何实现进行记录
innerText 与 innerHTML
innerText只能获取文字内容，展现不了标签的效果
innerHTML可获取文字内容，如有标签效果，则展示标签效果
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function innerTextTest(){
var MyDiv = document.getElementById("myDiv");
MyDiv.innerText = '<a href="http://www.baidu.com">连接</a>';
}
function innerHTMLTest(){
var MyDiv = document.getElementById("myDiv");
MyDiv.innerHTML = '<a href="http://www.baidu.com">连接</a>';
}
</script>
</head>
<body>
<!--<a href="http://www.baidu.com">连接</a>-->
<input type="button" value="innerText" onclick="innerTextTest()"/>
<input type="button" value="innerHTML" onclick="innerHTMLTest()"/>
<div id="myDiv">测试内容</div>
</body>
</html>
复选框全选和取消全选按钮
主要了解全选效果是怎样实现的
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//点击“全选”标志，让其他标志都打上勾
function checkAll(checks){
var a_checks = document.getElementsByClassName("checkOne");
for(var i=0; i<a_checks.length; i++){
a_checks[i].checked=checks.checked;
}
}
/*“全选”标志的自动取消和自动勾选
* 自动取消：在“全选”标志打上勾后，取消其他选项后，“全选”标志自动取消的效果；
* 自动勾选：在所有选项都勾选后，“全选”标志自动勾选的效果；
*/
function setCheckAll(checks){
var a_one = document.getElementsByClassName("checkOne");
var a_all = document.getElementById("all");
var k=0;
//取消其中的一个
for(var i=0; i<a_one.length; i++){
if(a_one[i].checked==false)//如果没有全部选择选项，则“全选”标志不会打上勾
{
a_all.checked = false;
}
else k++;
}
//在全部选择的情况下，“全选”标志打上勾
if(k==a_one.length){
a_all.checked = checks.checked;
}
}
</script>
</head>
<body>
<!--this 表示触发当前事件的HTML元素对象，方便引入当前对象的状态-->
<input type="checkbox" id="all" onclick="checkAll(this)" />全选<br />
<input type="checkbox" class="checkOne" onclick="setCheckAll(this)" />花<br />
<input type="checkbox" class="checkOne" onclick="setCheckAll(this)" />草<br />
<input type="checkbox" class="checkOne" onclick="setCheckAll(this)" />树<br />
<input type="checkbox" class="checkOne" onclick="setCheckAll(this)" />木<br />
</body>
</html>
多级联动（下拉菜单）
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//暂时写一个简短城市名称
var sc=['成都','绵阳']
var gd=['广州','深圳']
var hb=['武汉']
var yn=['昆明']
var gx=['桂林']
function setProvince(obj){
var a_number = obj.value; //读取数值，判断选择的哪个选项
var a_city=undefined; //初始化，防止再次更改时出现错误
switch(a_number){
case "0":
a_city=sc;
break;
case "1":
a_city=gd;
break;
case "2":
a_city=hb;
break;
case "3":
a_city=yn;
break;
case "4":
a_city=gx;
break;
}
//在省份选项选择完成后，城市选项应该展示的结果
var b_city = document.getElementById("setCity"); //得到元素
b_city.innerHTML = '<option >--请选择--</option>'; //初始化
for(var i=0; i<a_city.length; i++){
b_city.innerHTML += '<option>'+a_city[i]+'</option>';
//注意"+"，因为innerHTML每次刷新的时候，会将上次的内容给删除掉
}
}
</script>
</head>
<body>
省份<select onchange="setProvince(this)">
<option>--请选择--</option>
<option value="0">四川</option>
<option value="1">广东</option>
<option value="2">湖北</option>
<option value="3">云南</option>
<option value="4">广西</option>
</select>
城市<select id="setCity">
<option >--请选择--</option>
</select>
</body>
</html>
