SOURCE

var btn = document.getElementById('btn');
btn.innerHTML = 'button';

//定义一个函数，专门用来为指定元素绑定单击响应函数
function myClick(idStr,fun){
    var btn = document.getElementById(idStr);
    btn.onclick = fun;
}

var btn01 = document.getElementById('btn1');
btn01.onclick = function(){
    var bj = document.getElementById('bj');
    alert(bj.innerHTML);
}
var btn02 = document.getElementById('btn2');
btn02.onclick = function(){
    var lis = document.getElementsByTagName('li');
    for(var i = 0; i <lis.length;i++){
        alert(lis[i].innerHTML);
    }
}
var btn03 = document.getElementById('btn3');
btn03.onclick = function(){
    var inputs = document.getElementsByName('gender');
    for(var i = 0; i <inputs.length;i++){
        alert(inputs[i].value);
    }
}
var btn04 = document.getElementById('btn4');
btn04.onclick = function(){
    var city = document.getElementById('city');
    var lis = city.getElementsByTagName('li');
    for(var i = 0; i < lis.length;i++){
        alert(lis[i].innerHTML);
    }
} 

var btn05 = document.getElementById('btn5');
btn05.onclick = function(){
    var city = document.getElementById('city');
    //会获取元素节点，文本节点
    //其中的空白也会被当成文本节点
    //返回9
    var cns = city.childNodes;
    //返回长度4
    var cns2 = city.children;
    for(var i = 0; i < cns2.length;i++){
        alert(cns2[i].innerHTML);
    }
} 
var btn06 = document.getElementById('btn6');
btn06.onclick = function(){
    var phone = document.getElementById('phone');
    //获取第一个子节点，包括空白
    var fir = phone.firstChild;
    //ie8以上兼容
    var fir2 = city.firstElementChild;
    alert(fir);

}
var btn07 = document.getElementById('btn7');
btn07.onclick = function(){
    var bj = document.getElementById('bj');
    //获取当前节点的父节点
    var fath = bj.parentNode;
    alert(fath.innerHTML);

}
myClick('btn8',function(){
    var android = document.getElementById('android');
    //获取前一个兄弟节点，包括空白
    var bro = android.previousSibling;
    //获取兄弟元素，ie8以上兼容
    var bro1 = android.previousElementSibling;
    alert(bro1);
});

myClick('btn9',function(){
    var username = document.getElementById('username');
    alert(username.value);
});

// var btn08 = document.getElementById('btn8');
// btn08.onclick = function(){
//     var android = document.getElementById('android');
//     alert(android.previousSibling);
// }

var username = document.getElementById('username');
// var btn09 = document.getElementById('btn9');
// btn09.onclick = function(){
//     alert(username.value);
// }
var btn10 = document.getElementById('btn10');
btn10.onclick = function(){
    username.value = 'haojiahuo';
    alert(username.value);
}

var btn11 = document.getElementById('btn11');
btn11.onclick = function(){
    var bj = document.getElementById('bj');
    alert(bj.innerText);

}

<button id="btn">按钮</button>

<div id="a">
    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
    <br/>
    <p>你喜欢哪个游戏？</p>
    <ul>
        <li>消消乐</li>
        <li>飞车</li>
        <li>乙女游</li>
        <li>节奏</li>
    </ul>
    <br/>
    <p>你手机的操作系统是？</p>
    <ul id="phone">
    <li>ios</li>
    <li id="android">安卓</li>
    <li>windows phone</li>
    </ul>
    <br/>
    <br/>
    gender:<input type="radio" name="gender" value="male">Male
    <input type="radio" name="gender" value="female">Female

    <br/>
    name:<input type="text" id="username" value="abb">

</div>

<div>
    <button id="btn1">查找#bj节点</button>
    <button id="btn2">查找所有li节点</button>
    <button id="btn3">查找name=gender的节点</button>
    <button id="btn4">查找#city下的所有li节点</button>
    <button id="btn5">返回#city的所有子节点</button>
    <button id="btn6">查找#phone的第一个子节点</button>
    <button id="btn7">返回#bj的父节点</button>
    <button id="btn8">返回#Android的前一个兄弟节点</button>
    <button id="btn9">返回#username的value属性值</button>
    <button id="btn10">设置#username的value属性值</button>
    <button id="btn11">返回#bj的文本值</button>
</div>

ul li{
    list-style: none;
    float: left;
    border: 1px solid black;
    margin-right: 15px;
    background: greenyellow;
    padding: 5px;
    margin-bottom: 10px;
}
p{
    margin-top: 25px;
}
#a{
    border: 1px solid gray;
    float: left;
    padding: 5px;
}