SOURCE

window.onload=function(){
    // document.getElenentByID
    var oDIV1=document.getElementById("Div1");
    console.log("The node type of oDiv1 is"+oDIV1.nodeType);
    var oAttributeNode=oDIV1.getAttributeNode("id");
    console.log("The node type of oAttributeNode is"+oAttributeNode.nodeType);
    var oTextNode=oDIV1.childNodes[0];
    console.log(oTextNode.nodeType);
    // document.getElenentsByTagName
    var oDivs=document.getElementsByTagName("div");

    console.log("The length of oDivs is "+ oDivs.length);

    if(oDIV1==oDivs[0]){
        console.log("YEP");
    }
    var oUIs=document.getElementsByTagName("ul");
    var oLisInUI1=oUIs[0].getElementsByTagName("li");
    var oLisInDoc=document.getElementsByTagName("li");
    console.log(oLisInUI1.length);
    console.log(oLisInDoc.length);

    // getElementByClassName()

    var oList2=document.getElementsByClassName("TwoA");
    console.log(oList2.length);
    var oRadios=oDivs[1].getElementsByClassName("radio");
    console.log(oRadios.length);
    var oRadios3=oDivs[2].getElementsByClassName("radio");
    console.log(oRadios3.length);

    // querySelector

    var oInputFemale=document.querySelector("input:checked");
    console.log("line 54"+oInputFemale.value);

    var oInput=document.querySelectorAll("input");
    console.log("line 57"+oInput.length);

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

    var oClassInputs=document.querySelectorAll(".radio");
    oClassInputs[0].checked=true;

    var oLi22=document.querySelector("#lio");
    oLi22.style.color="red";

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

    //通过getElementByName查找元素

    var oNamedRadios=document.getElementsByName("gender");
    console.log(oNamedRadios[0].value);
    oNamedRadios[1].checked=true;

    var oFRUITS=document.getElementsByName("furit");
    console.log(oFRUITS[0].value);
    oFRUITS[1].checked=false;

    //document.title="Hello DOM";

    console.log(document.title);

    console.log(document.body.tagName);

    //console.log(document.body.childNodes[0].length);

    //创建元素节点和文本节点

    var oDnamicButton=document.createElement("button");
    var oTextNode=document.createTextNode("提交");
    oDnamicButton.appendChild(oTextNode);
    //document.body.appendChild(oDnamicButton);

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

    //创建可以动态添加对象的元素

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

    oDynamicButtom.appendChild(oTextNode);

    document.body.insertBefore(oDynamicButtom,oUIs[0]);

    oDynamicButtom.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]);
    }
     //查看属性
     console.log("Line 114:The id of oDiv1:"+oDIV1.id);
     console.log(oDIV1.data);
     console.log(oDIV1.getAttribute("data"));
     console.log(oDIV1.getAttribute("id"));
     console.log(oDIV1.className);
     //设置属性

     var oInput1=document.getElementById("insertInput");
     //oInput.value="Enter...";
     

     //删除属性
     oInput1.removeAttribute("value");
 
     

}

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

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

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

     oCreatedLi.appendChild(oLiText);
     oUl.insertBefore(oCreatedLi, oLis[0]);

     
     } 


function appendChildGG(){
    var oInput1 = document.getElementById("appendInput");
    var oInputText = oInput1.value;
    //console.log(oInputText);

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

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

    oCreatedLi.appendChild(oLiText);
    oUl.insertBefore(oCreatedLi, oLis[oLis.length]);

    //查看属性
    
    } 

function removeBottom(){
    var oUI=document.getElementById("List2");
    var oLis=oUI.getElementsByTagName("li");
    oUI.removeChild(oLis[oLis.length-1]);
}

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="Div1" data="userDefined" class="div1">
        <p id="Paragraph">Hello</p>
        World
    </div>
    <ul id="List1" class="TwoA">
        <li id="lio"> hhhhhh </li>
        <li> Html </li>
        <li> Javascript </li>
        <li> CSS </li>
    </ul>
   <input id="insertInput" type="text"></input>
   <button onclick="insertChild()">插入列表元素顶部</button>
    <ul id="List2" class="TwoA">
        <li> Vue </li>
        <li> React </li>
        <li id="dad"> Angular </li>
    </ul>
    <input id="appendInput" type="text"></input>
    <button onclick="appendChildGG()">插入列表元素尾部</button>
    <button onclick="removeBottom()">删除列表元素尾部</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="furit" checked="true" value="苹果">苹果</input>
        <input type="checkbox" name="furit" value="梨">梨</input>
    </div>    
    <div id="DynamicDiv1"></div>
    <div id="DynamicDiv2"></div>
</body>
</html> 

ul{
    background:lightblue;
};