SOURCE

var div = document.querySelector('.box1 div');
console.log(div);
//只会查询一个元素，如果有多个只返回第一个
var box1 = document.querySelector('.box1');
var divs = document.querySelectorAll('.box1 div');
console.log(divs.length);

//body
var body = document.body;
//html
var html = document.documentElement;
//所有节点
var all = document.all;
console.log(body);
console.log(html);
console.log(all.length);

box1 = document.getElementsByClassName('box1');
console.log(box1);


function myClick(idStr, fun){
    var btn = document.getElementById(idStr);
    btn.onclick = fun;
}

myClick('btn1',function(){
    //可以用于创建一个元素节点对象
    var li = document.createElement('li');
    //可以用于创建一个文本节点对象
    // var gzText = document.createTextNode('广州');
    // li.appendChild(gzText);
    li.innerHTML = '广州';
    var city = document.getElementById('city');
    city.appendChild(li);
    //或者innerHtml
    // city.innerHTML += '<li>广州</li>';

});

myClick('btn2',function(){
    //可以用于创建一个元素节点对象
    var li = document.createElement('li');
    //可以用于创建一个文本节点对象
    var gzText = document.createTextNode('广州');
    li.appendChild(gzText);
    var city = document.getElementById('city');
    var bj = document.getElementById('bj');
    //可以在指定子节点前插入一个子节点
    //父节点.insert before（新节点，旧节点）
    city.insertBefore(li,bj);

});
myClick('btn3',function(){
    //可以用于创建一个元素节点对象
    var li = document.createElement('li');
    //可以用于创建一个文本节点对象
    var gzText = document.createTextNode('广州');
    li.appendChild(gzText);
    var city = document.getElementById('city');
    var bj = document.getElementById('bj');
    //可以在指定子节点前插入一个子节点
    //父节点.insert before（新节点，旧节点）
    city.replaceChild(li,bj);
});
myClick('btn4',function(){
    //可以用于创建一个元素节点对象
    var li = document.createElement('li');
    //可以用于创建一个文本节点对象
    var gzText = document.createTextNode('广州');
    li.appendChild(gzText);
    var city = document.getElementById('city');
    var bj = document.getElementById('bj');
    // city.removeChild(bj);
    bj.parentNode.removeChild(bj);
});
myClick('btn5',function(){
    //可以用于创建一个元素节点对象
    var li = document.createElement('li');
    //可以用于创建一个文本节点对象
    var gzText = document.createTextNode('广州');
    li.appendChild(gzText);
    var city = document.getElementById('city');
    var bj = document.getElementById('bj');
    // city.removeChild(bj);
    bj.innerHTML = '昌平';
});

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

<div id="a">
    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
    <br/>
</div>

<div>
    <button id="btn1">创建一个‘广州’节点，添加在#city下</button>
    <button id="btn2">将广州节点插入到#bj前面</button>
    <button id="btn3">用广州替换#bj</button>
    <button id="btn4">删除子节点#北京</button>
    <button id="btn5">设置#bj内的html代码</button>
    <button id="btn6">查找#phone的第一个子节点</button>
    <button id="btn7">返回#b的父节点</button>
    <button id="btn8">返回#Android的第一个兄弟节点</button>
    <button id="btn9">返回#username的value属性值</button>
    <button id="btn10">设置#username的value属性值</button>
    <button id="btn11">返回#b的文本值</button>
</div>

<div class="box1">
    <div>   woshibox1zhongde</div>
</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;
}