SOURCE

window.onload = function () {

    //元素结点nodeType为1
    //getElementById通过id来获取元素
    var oDiv1 = document.getElementById("Div1");
    console.log("The node type of oDiv1 is " + oDiv1.nodeType);

    //属性结点nodeType为2
    //
    var oAttributeNode = oDiv1.getAttributeNode("id");
    console.log("The node type of oAttributeNode is " + oAttributeNode.nodeType);

    //文本结点nodeType为3
    var oTextNode = oDiv1.childNodes[0];
    console.log("The node type of oTextNode is " + oTextNode.nodeType);

    //document.getElementsByTagName
    var oDivs = document.getElementsByTagName("div");
    console.log("The length of oDivs is " + oDivs.length);

    if (oDiv1 == oDivs[0]) {
        console.log("We are the same node.");
    }

    var oUls = document.getElementsByTagName("ul");
    var oLisInUl1 = oUls[0].getElementsByTagName("li");
    var oLisInDoc = document.getElementsByTagName("li");

    console.log("The length of oLisInUls is " + oLisInUl1.length);
    console.log("The length of oLisInDoc is " + oLisInDoc.length);
    //var oLi=oUls[0].getElementById("li");

    //getElementsByClassName()

    var oLists = document.getElementsByClassName("list");
    console.log("The length of oLists is " + oLists.length);

    var oRadios = oDivs[1].getElementsByClassName("radio");
    console.log("The length of oRadios is " + oRadios.length);

    var oRadios3 = oDivs[2].getElementsByClassName("radio");
    console.log("The length of oRadioss3 is " + oRadios3.length);

    //querySelector
    //通过伪类选择器选择第一个checked状态为真的input元素
    var oInputFemale = document.querySelector("input:checked");
    console.log("Line:54 " + oInputFemale.value);

    //通过元素选择器查找所有input元素，这种最好使用getElementsByTagName，效率更高
    var oInputs = document.querySelectorAll("input");
    console.log("Line 57: " + oInputs.length);

    oInputs[1].checked = true;
    oInputs[3].checked = true;

    //通过id选择器查找所有class为radio的元素，这种
    var oClassInputs = document.querySelectorAll(".radio");
    oClassInputs[0].checked = true;

    //更改元素颜色
    var oLi11 = document.querySelector("#Li11");
    oLi11.style.color = "red";

    var oList2Lis = document.querySelectorAll("#List2 li");
    oList2Lis[0].style.color = "blue";
    oList2Lis[1].style.color = "green";
    oList2Lis[2].style.color = "orange";

    //通过
    var oNamedRadios = document.getElementsByName("gender");
    console.log("Line 80: " + oNamedRadios[0].value);
    oNamedRadios[1].checked = true;

    var oFruits = document.getElementsByName("fruit");
    console.log("Line 80: " + oFruits[0].value);
    oFruits[0].checked = false;

    //var oDivFruits = oDivs[2].getElementsByName("fruit");

    console.log(document.title);
    console.log(document.body.tagName);

    //console.log(document.body.childNodes.length);

    //创建简单元素
    var oDynamicButton = document.createElement("button");
    var oTextNode = document.createTextNode("替换");

    oDynamicButton.appendChild(oTextNode);
    //document.body.appendChild(oDynamicButton);

    document.body.insertBefore(oDynamicButton, oUls[0]);

    oDynamicButton.onclick = function () {
        var oDiv1 = document.getElementById("Div1");
        var oPHi = document.createElement("p");
        var oPText = document.createTextNode("Hi");
        oPHi.appendChild(oPText);

        oDiv1.replaceChild(oPHi, oDiv1.childNodes[1]);
    }
    // 创建可以动态添加对象的元素
    var oAppendInput = document.createElement("input");

}

function insertChild() {
    var oInput = document.getElementById("insertInput");
    var oInputText = oInput.value;

    var oUl = document.getElementById("List1");
    var oLis = oUl.getElementsByTagName("li");

    var oCreatedLi = document.createElement("li");
    var oLiTest = document.createTextNode(oInputText);
    oCreatedLi.appendChild(oLiTest);

    oUl.insertBefore(oCreatedLi, oLis[0]);
}
function inserToList(){
    var iInput=document.getElementById("inserInput");
    var oInputText=oInput.value;
    console(oInputText);

    var oCreatedLi=document.getElementById("List1");
    var oLis=oUl.getElementsByTagName("li");

    oUl.removeChild(oLis[0]);
}

function appendToList(){
    var oInput=document.getElementById("appendInput");
    var strValue=oInput.value;

    //1.创建节点的方法

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

    oList2.appendChild(oCreatedLi);
}


//??????????????????????????????????????
function appendToButtomList(){
    var 
    var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中去
                oLi.appendChild(textNode);
                //将li元素插入ul元素中去
                oUl.appendChild(oLi);
}

function removeTop(){//删掉顶部
    var oList1=document.getElementById("List1");
    var oLis=document.getElementsByTagName("li");

    oList1.removeChild(oLis[0]);
}

function removeButton(){//删除底部
    var oList1=document.getElementById("List2");
    var oLis=document.getElementsByTagName("li");

    oList1.removeChild(oLis[oLis.length-1]);
}

 //var oCreatedLi=oLis[1].cloneNode(true);
    //oCreatedLi.textContent=strValue;

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

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1"  data="userdefiende" class="div1">
            <p id="Paragraph">Hello</p>
            World
        </div>
        <ul id="List1" class="list">
            <li id = "Li11"> Html </li>
            <li> Javascript </li>
            <li> CSS </li>
            <li> Webpack </li>
        </ul>
        <input id="insertInput" type="text"></input>
        <button onclick="insertChild()">插入列表元素顶部</button>
        <button onclick="removeTop()">删除顶部元素</button>
        <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="appendChild">删除尾部元素</button>
        <div>
            你的性别是：
            <input class="radio" type="radio" name="gender" checked="true" value="女">女</input>
            <input class="radio" type="radio" name="gender" value="男">男</input>
        </div>
        <div>
            你喜欢那些水果：
            <input 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> 

ul{
    background: lightcyan;
}
#div1{
    background: blueviolet;
}