SOURCE

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

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

    // getElementsByTagName
    var oUls = document.getElementsByTagName("ul");
    console. log ("There are"+ oUls. length+" ul in document.");
    
    var oListilis = oUls[0].getElementsByTagName("li");
    console. log ("There are"+ oListilis. 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].getElementsByClassName("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的元素，这种情况，尽量用getElementByClassName,效率更高
    var oClassRadios = document.querySelectorAll(".radio");
    console.log("Line 49:"+ oClassRadios.length);

    //使用选择器查找第一个class为radio的div元素 
    var oClassRadioDiv = document.querySelector("div.radio");
    console.log("Line 53:"+ oClassRadioDiv.tagName);

    //使用选择器查找第一个class为radio的div元素下所有class为radio的子元素
    var oClassDivRadios = oClassRadioDiv.querySelectorAll(".radio");
    console.log ("Line 57:"+ oClassDivRadios.length);

    //使用伪类选择器找到第一个checked状态为真的input
    var oCheckedInput = document.querySelector("input:checked");
    console.log("Line 61:"+ oCheckedInput. value);
    
    //使用元素选择器找到所有的u1元素，这种情况，尽量使用getElementByTagName,效率更高
    var olists = document.querySelectorAll("ul");
    console.log("Line 65"+ olists. length);

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



    //document.title
    console.log("Line 74:"+ document.title);

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

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

    document.body.insertBefore(oButton,oDivs[1]);

    //replaceChild
    oButton.onclick = function(){
        //元素替换
        var oDiv1 = document.getElementById("Div1");
        var oPHi = document.createElement("p");
        var oPHiText = document.createTextNode("HI");
        oPHi.appendChild(oPHiText);

        

        oDiv.replaceChild(oPHi,oDiv1.childNodes[1]);

    }

    console.log("Line 100:" + oDiv1.id);
    console.log("Line 101:" + oDiv1.getAttribute("id"));
    console.log("Line 102:" + oDiv1.data);
    console.log("Line 103:" + oDiv1.getAttribute("data"));
    

}

function insertToList() {
    var oInput = document.getElementById("insertInput");
    var strValue = oInput.value;

    //1. 创建节点的方法

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

    oList1.insertBefore(oCreatedLi, oLis[0]);
}

function appendToList(){
    var oInput=document.getElementById("appendInput");
    var strValue=oInput.value;
    
    //1. 创建节点的方法

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

    oList2.appendChild(oCreatedLi);
    }

function removeTop() {
    var oList1 = document.getElementById("List1");
    var oLis = document.getElementsByTagName("li");
    oList1.removeChild(oLis[0]);
    
} 

//appendChild就是插入到尾部
function appendChild(){
    var oInput = document.getElementById("insertInput");
    var strValue = oInput.value;
    //1. 创建节点的方法

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

    oList2.appendChild(oCreatedLi);
}

function removeButtom(){
    var oList2 = document.getElementById("List2");
    var oLis = document.getElementsByTagName("li");
    oList2.removeButtom(oLis[0]);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1" data="自定义属性">
            <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="appendChild()">添加到列表元素的尾部</button>
            <button onclick="removeButton()">删除尾部元素</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> 

.list {
    background-color: lightblue;
}

#Div1 {
    background-color: lavender;
}