运用知识点：
浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象为空
浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象为空
DOM查询
获取元素节点
通过document对象调用
1getElementById() 通过id属性获取一个元素节点对象
2.getElementsByTagName（） 通过标签名获取一组元素节点对象
3.getElementsByName（） 通过name属性获取一组元素节点对象，获取表单项
通过点击页面中的按钮实现相关js功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
//1.查找北京节点
//为id为btn01的按钮设置一个单击响应函数
var btn01 = document.getElementById("btn01");//获取btn对象
btn01.onclick = function () {
var bj = document.getElementById("bj");//查找id为bj的节点
//通过innerHTML获取元素内部的html代码
alert(bj.innerHTML);
};
//2.查找所有li节点
//为btn02的按钮绑定一个点击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
var lis = document.getElementsByTagName("li");/* 这个方法给我们返回一个类数组对象，
所有查询到的元素封装到对象中 */
//遍历lis
//alert(lis.length);
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
//3.查找name等于gender的所有节点
//为btn03按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var inputs = document.getElementsByName("gender");
for (var i = 0; i < inputs.length; i++) {
//innerHTML用于获取元素内部的HTML代码的，input是没有内部的，对于自结束标签没有意义
alert(inputs[i].value);/* 如果要读取元素节点的属性，直接用元素.属性名， 例如：元素.id 元素.name
元素.value但是calss属性不能采用，要使用
元素 .className */
}
};
//4.查找#city下的所有子节点
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
//获取id为city的元素节点
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");//document在整个页面查询而city在当前ul里查询
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
//5.返回city的所有子节点
//为idbtn05绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
//获取id为city的元素节点
var city = document.getElementById("city");
//返回city的所有子节点
var cns = city.childNodes;/* childNodes会获取包括文本节点在内的所有节点，
根据DOM标准标签间的空白也会当成文本节点 */
//alert(cns.length);
var cns2 = city.children;//children属性可以获取当前元素所有子元素，不包括空白节点
alert(cns2.length);
};
//6.返回#phone的第一个子节点
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
//获取id为phone的元素节点
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
var fir = phone.firstChild;//列表项有空格获得空格
fir = phone.firstElementChild//获取当前元素的第一个子元素，firstElementChild不支持IE8以下的浏览器
alert(fir.innerHTML);
};
/*以上代码都是重复的：所以写一个函数简化代码
定义一个点击函数，专门用来未指定元素绑定单击响应函数
参数：
idStr 要绑定单机响应函数的对象的id属性值
fun 事件的回调函数，当单击元素时，该函数会被触发
*/
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);//获取btn对象
btn.onclick = fun;
}
//7.返回id为#bj的父节点
// 为id为btn07的按钮绑定一个单击响应函数
myClick("btn07", function () {
//获取id为bj的节点
var bj = document.getElementById("bj")
//返回#bj的父节点
var pn = bj.parentNode;
alert(pn.innerHTML);
/*
innerHTML:是获取内部HTML代码
innerText：获取到元素的文本内容，和innrtHTML类似，不同的是他会自动将html去除
*/
});
//8.返回#android的一个兄弟节点
//为idbtn08按钮绑定一个单击想隐函数
myClick("btn08", function () {
//获取id为android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点
var ps = and.previousSibling;//可能获取到空白文本
ps = and.previousElementSibling;
alert(ps.innerHTML);
//返回#android的后一个兄弟节点
var pe = and.nextSibling;//列表项前有空格获取空格
pe = and.nextElementSibling;
alert(pe.innerHTML);
});
//9.读取#username的value属性值
myClick("btn09", function () {
//获取id为username的元素
var um = document.getElementById("username");
//读取#username的value属性值 文本框的value属性值就是文本框中的内容
alert(um.value);
});
//10.设置username的value属性值
myClick("btn10", function () {
//获取id为username的元素
var um = document.getElementById("username");
//读取#username的value属性值 文本框的value属性值就是文本框中的内容
um.value = "今天天气很不错";
});
//11.返回#bj文本值
myClick("btn11", function () {
/* //获取id为bj的元素
var bj = document.getElementById("bj");
alert(bj.innerHTML); 下面也可以：*/
//获取bj的文本节点
var fc = bj.firstChild;
alert(fc.nodeValue);//nodeValue获取文本加点的值
});
};
</script>
</head>
<body>
<div class="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 class="game">
<li id="r1">红警</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>
<div class="inner">
gender:
<input type="radio" name="gender" value="male">
Male:
<input type="radio" name="gender" value="female">
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde">
</div>
<div class="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>展示画面：
第一个按钮点击：查找北京节点
第三个按钮点击 ：查找name等于gender的所有节点
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
