SOURCE

window.onload=function(){
    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);

    var oDivs=document.getElementsByTagName("div");

    console.log("The node type 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 oLisInUl1 is "+oLisInUl1.length);
    console.log("The length of oLisInDoc is "+oLisInDoc.length);

    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 oRadios3 is "+oRadios.length);

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

    var oInputs =document.querySelectorAll("input");
    console.log("line 39 "+oInputs.length);

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

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

//通过id选择器查找第一个id为Li11的元素
    var oLi11 =document.querySelector("#Li11");
   oLi11.style.color="red";
//查找父元素的Id为List2的所有li元素
    var oList2Lis = document.querySelectorAll("#List2 li");
    oList2Lis[0].style.color="blue";
    oList2Lis[1].style.color="green";
    oList2Lis[2].style.color="orange";

    var oNameRadios= document.getElementsByName("gender")
    console.log("line 58 "+oNameRadios[0].value);
    oNameRadios[1].checked = true;

    var oFruits = document.getElementsByName("fruit");
    console.log("line 62: "+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.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]);
}
//查看属性
console.log("line 87: id of oDiv1 :"+oDiv1.id);
console.log("line 88: data of oDiv1 :"+oDiv1.data);
console.log("line 89: data of oDiv1 :"+oDiv1.getAttribute("data"));

//设置属性
var oInput = document.getElementById("insertInput");
oInput.setAttribute("value","enter");

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

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

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 removeTop() {
var oUl = document.getElementById("List1");
var oLis = oUl.getElementsByTagName("li");

oUl.removeChild(oLis[0]);
}

function appendTolist(){
    var oInput = document.getElementById("appendInput");
    var strvalue = oInput.value;
   // console.log(oInputTexts);

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

    var oCreatedLi = oLis[1].cloneNode(true);
    oCreatedLi.textContent=strvalue;
    oList2.appendChild(oCreatedLi);
    
}
function removelast() {
var oUl = document.getElementById("List2");
var oLis = oUl.getElementsByTagName("li");

oUl.removeChild(oLis[3]);
}
//clone插入列表顶部
function insertChildClone() {
var oInput = document.getElementById("insertInput");
var oInputText = oInput.value;
console.log(oInputText);

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

var oCreatedLi = oLis[0].cloneNode(false);
oCreatedLi.textContent = oInputText;

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

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1" data="userDefind">
            <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="insertChildClone()">插入列表元素顶部</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="appendTolist()">添加到列表元素的尾部</button>
        <button onclick="removelast()">删除到列表元素的尾部</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: lightblue;}