SOURCE

window.onload = function() {
    //document.getElementById
    var oDiv1 = document.getElementById("Div1");
    console.log("The nodeType of Div1 is"+ oDiv1.nodeType);
    console.log("There are" + oDiv1.childNodes.length + "child node in oDiv1");
    console.log("The nodeType of the first child node of oDiv1 is" + oDiv1.childNodes[0].nodeType);
    console.log("The nodeType of the first child node of oDiv1 is" + oDiv1.childNodes[0].nodeValue);
    console.log("The nodeType of the second child node of oDiv1 is" + oDiv1.childNodes[1].nodeType);
    console.log("The nodeType of the second child node of oDiv1 is" + oDiv1.childNodes[1].tagName);
    console.log("The nodeType of the Third child node of oDiv1 is" + oDiv1.childNodes[2].nodeType);
    console.log("The nodeType of the Third child node of oDiv1 is" + oDiv1.childNodes[2].nodeValue);

    console.log("There are "+ oDiv1.attributes.length + "attributes in oDiv1");
    console.log("The name of attribute of oDiv1 is" + oDiv1.attributes[0].name);
    console.log("The nodeType of attribute of oDiv1 " + oDiv1.attributes[0].nodeType);

    //getElementByTagName
    var oUls = document.getElementsByTagName("ul");
    console.log("There are" + oUls.length + "ul in document.");

    var oList1Lis = oUls[0].getElementsByTagName("li");
    console.log("There are" + oList1Lis.length + "li in the first ul.");

    var oDocLis = document.getElementsByTagName("li");
    console.log("There are" + oDocLis.length + "li in the document.");

    //getElementsByClassName
    var oRadios = document.getElementsByClassName("radio");
    console.log("There are" + oRadios.length + "radio class in the document.");

    var oDivs = document.getElementsByTagName("div");
    var oRadios1 = oDivs[1].getElementsByTagName("radio");
    console.log("There are "+ oRadios1.length + "radio class in the second div");

  //querySelector
    //使用id选择器找到第一个值为id名的元素节点
    //这种情况尽量用getElementById.效率更高
    var oList1 = document.querySelector("#List1");
    console.log("Line 38:"+ oList1.id);

   //使用元素选择器去找到所有ul元素下的li子元素
    var oLis = document.querySelectorAll("ul li");
    console.log("Line 42 :"+ oLis.length);
    oLis[0].style.color = "red";
    oLis[1].style.color = "blue";
    oLis[2].style.color = "green";

    //使用类选择器找到所有class为radio的元素
    var oClassRadios = document.querySelectorAll(".radio");
    console.log("Line 46:"+oClassRadios.length);

    //找第一个class为radio的div元素
    var oClassRadioDiv = document.querySelector("div.radio");
    console.log("Line 49:"+oClassRadioDiv.tagName);

    //找第一个class为radio的div元素下所有class为radio的子元素
    var  oClassDivRadios = oClassRadioDiv.querySelectorAll(".radio");
    console.log("Line 52:"+oClassDivRadios.length);
    
    //使用伪类选择器找到所有checked状态为真的input
    var oCheckedInput = document.querySelector("input:checked");
    console.log("Line 56:"+ oCheckedInput.value);

   //使用元素选择器找到所有ul元素，这种情况尽量使用getElementByTagName，效率更高
    var oLists = document.querySelectorAll("ul");
    console.log("Line 59:"+oLists.length);

    //getElementsByName
    var oFruitInputs = document.getElementsByName("fruit");
    console.log("Line 66:" + oFruitInputs[0].value);

    //var oGenderInputs = oClassRadioDiv.getElementsByName("gender");
    //console.log("Line 66:" + oGenderInputs[0].value);
    
    //document.title
    console.log("Line 76:" + document.title);

    //document.body
    console.log("Line 80:" + document.body.tagName);

    //创建一个简单的button,把他插入到文档的末尾
    var oButton = document.createElement("button");
    var oTextNode = document.createTextNode("提交");
    oButton.appendChild(oTextNode);

    // document.body.appendChild(oButton);

    //插入元素
    document.body.insertBefore(oButton,oDivs[1]);
    
} 
    //添加顶部
    function insertChildClone(){
    var oInput = document.getElementById("insertInput");
    var strValue = oInput.value;
    //创建节点的方法
    /*   var oButton = document.createElement("button");
    var oTextNode = document.createTextNode("提交");
    oButton.appendChild(oTextNode);
    */

    //克隆节点的方法
    var oList1 = document.getElementById("List1");
    var oLis = document.getElementsByTagName("li");
    var oCreatedLi = oLis[1].cloneNode(true);
    oCreatedLi.textContent = strValue;

    oList1.insertBefore(oCreatedLi,oLis[0]);
    }
    //删除顶部
    function removeTop(){
     var oList1 = document.getElementById("List1");
     var oLis = document.getElementsByTagName("li");
     oList1.removeChild(oLis[0]);
    }
    //添加尾部
    function appendChild2(){
       var oUl = document.getElementById("List2");
                var oTxt = document.getElementById("appendInput");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中去
                oLi.appendChild(textNode);
                //将li元素插入ul元素中去
                oUl.appendChild(oLi);
    }
    //删除尾部
    function removeButtom(){
    var oUl = document.getElementById("List2");
    //删除最后一个子元素
    oUl.removeChild(oUl.lastElementChild);     
    }

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1">
            <p id="Paragraph">Hello</p>
            World
        </div>
        <div>
            <ul id="List1" class="list">
                <li id = "11"> Html </li>
                <li> Javascript </li>
                <li> CSS </li>
                <li> Webpack </li>
            </ul>
            <input id="insertInput" type="text"></input>
            <button onclick="insertChildClone()">插入列表元素顶部</button>
            <button onclick="removeTop()">删除顶部元素</button>
        </div>
        <div>
            <ul id="List2" class="list">
                <li> Vue </li>
                <li> React </li>
                <li> Angular </li>
            </ul>
            <input id="appendInput" type="text"></input>
            <button onclick="appendChild2()">添加到列表元素的尾部</button>
            <button onclick="removeButtom()">删除尾部元素</button>
        </div>
        <div class="radio">
            你的性别是：
            <input class="radio" type="radio" name="gender" checked="true" value="女">女</input>
            <input class="radio" type="radio" name="gender" value="男">男</input>
        </div>
        <div>
            你喜欢那些水果：
            <input class="radio" type="checkbox" name="fruit" checked="true" value="苹果">苹果</input>
            <input type="checkbox" name="fruit" value="梨">梨</input>
        </div>    
        <div id="DynamicDiv1"></div>
        <div id="DynamicDiv2"></div>
    </body>
</html>