三个获取元素节点对象：
根据id获取一个元素节点对象
getElementById()
根据标签获得一组元素对象,返回类数组对象
getElementsByTagName()
根据name属性获取一组元素对象，返回类数组对象
getElementsByName()；
基本代码片段：
.but{
clear: both;
}
li{
width: 70px;
height: 100%;
background-color: aquamarine;
list-style: none;
border: 1px solid;
display:inline;
margin-right: 2px;
margin-bottom: 10px;
font-size: 10px;
}
.chosen{
margin-top: 20px;
}
.left{
float: left;
width: 50%;
}
.right{
float: right;
width: 50%;
}
<div class="left">
<div >
你喜欢那个城市
<ul>
<li id="bj">北京</li>
<li>上海</li>
<li>新加坡</li>
<li>首尔</li>
</ul>
</div>
<div class="chosen">
你喜欢那个游戏
<ul>
<li>象棋</li>
<li>斗地主</li>
<li>极品飞车</li>
<li>红警</li>
</ul>
</div>
<div class="chosen">
你的性别：
<input type="radio" name="gender" value="man" class="a">男
<input type="radio" name="gender" value="wman" class="b">女
</div>
<div class="chosen">
姓名：<input type="text">
</div>
</div>
如图：
20181109080144.png
通过按钮获取制定元素节点
<div class="right chosen" >
<div class="but"><button id="btn01">获取id=”bj“的节点</button></div>
<button id="btn02">获取li的节点</button>
<button>查找name="gender所有节点</button>
1.获取id=”bj“的节点
//为id=btn01按钮绑定一个单击响应事件,window.onload文档加载完成后执行
window.onload =function () {
var btn01=document.getElementById("id") //绑定单击响应事件
btn01.onclick =function (){
var bj=document.getElementById("bj");
alert("你喜欢的城市是："+bj.innerHTML);
};
}
2.获取所有li的节点，即使查询到的数组只有一个，也会返回一数组对象
var btn02=document.getElementById("btn02");
btn02.onclick =function () {
var lis=document.getElementByTagName("li");
}
3 innerHTML 用来获取元素内部的HTML代码的，并不适用于自结束标签,可直接读取该元素的任何属性，即 元素.属性名 但是，读取class(class是保留关键字)时 要用classNname
btn03.onclick=function(){
var names=document.getElementsByName("gender");
for(var j=0;j<names.length;j++){
alert(names[j].value);
alert(names[j].type);
alert(names[j].className);
}
}
