SOURCE

window.onload = function () {
    //document.getElementById 只能用document
    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("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.");
    }
    //除了document还可以用别的方式
    var oUls=document.getElementsByTagName("ul");
    var oLisInUl1=oUls[0].getElementsByTagName("li");
    var oLisInDoc=document.getElementsByTagName("li");

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

    //getElementsByClassName()
    var oLists=document.getElementsByClassName("list");
    console.log("The length of Lists 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 oRadios3 is "+oRadios3.length);

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

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

    oInputs[1].checked=true;
    oInputs[3].checked=true;
    
    //通过类选择器查找所有class为radio的元素，这种最好使用getElementByClassName，效率更高
    var oClassInputs=document.querySelectorAll(".radio");
    oClassInputs[0].checked=true;

    //通过id选择器查找第一个id为Li11的元素，这种最好使用getElementById，效率更高
    var oLi11=document.querySelector("#Li11");
    oLi11.style.color="red";

    //查找父元素的id为List2的所有li元素
    var oList2Lis=document.querySelectorAll("#List2 li");
    oList2Lis[0].style.color="green";

    //通过getElementByName查找元素
    var oNamedRadios=document.getElementsByName("gender");
    console.log("line 80: "+oNamedRadios[0].value);
    oNamedRadios[1].checked=true;

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

    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]);

    //创建可以动态添加对象的元素
    //var oAppendInput=document.createElement("input");

    //元素替换
    oDynamicButton.onclick=function(){
        var oDiv1=document.getElementById("Div1");
        var oPHi=document.createElement("p");
        var oPText=document.createTextNode("Good");
        oPHi.appendChild(oPText);

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

    //查看属性
    console.log("Line 114: The id of oDiv1:"+oDiv1.id);
    console.log("Line 117: The id of oDiv1:"+oDiv1.getAttribute("id"));

    //自定义的属性是使用getAttribute 不可以直接获取
    console.log("Line 115: The data of oDiv1:"+oDiv1.data);
    console.log("Line 116: The data of oDiv1:"+oDiv1.getAttribute("data"));

    //class是系统关键词，用的是className获取
    console.log("Line 118: The class of oDiv1:"+oDiv1.className);
    
    //设置属性
    var oInput=document.getElementById("insertInput");
    //oInput.value="Enter...";
    oInput.setAttribute("value","Enter");

    //删除属性
    oInput.removeAttribute("value");
    //oUls[0].removeAttribute("className");

    //判断属性是否存在
    if(oInput.hasAttribute("value")){
        console.log("value is the attribute of oInput");
    }
}

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

    var oList1=document.getElementById("List1");
    var oLis1=oList1.getElementsByTagName("li");

    var oCreatedLi1=oLis1[0].cloneNode(true);
    oCreatedLi1.textContent=oInputText1;
    
    oList1.insertBefore(oCreatedLi1,oLis1[0]);
}

function removeTop(){
    var oList1=document.getElementById("List1");
    var oLis=oList1.getElementsByTagName("li");

    oList1.removeChild(oLis[0]);
}

function appendChild1(){
    var oInput=document.getElementById("appendInput");
    var oInputText2=oInput.value;

    var oList2=document.getElementById("List2");
    var oLis2=oList2.getElementsByTagName("li");

    var oCreatedLi2=oLis2[1].cloneNode(true);
    oCreatedLi2.textContent=oInputText2;
    
    oList2.appendChild(oCreatedLi2);
}

function removeBottom(){
    var oList2=document.getElementById("List2");
    var oLis=oList2.getElementsByTagName("li");

    oList2.removeChild(oList2.lastElementChild);
}

<!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="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="appendChild1()">添加列表尾部元素</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;
};

#Div1{
    background: lightpink;
};