SOURCE

window.onload=function()
{
    var oDiv1=document.getElementById("Div1")
    console.log("The node type of oDiv1 is"+oDiv1.nodeType);//oDiv1的类型是元素节点
    console.log("There are"+oDiv1.childNodes.length+"child nodes in oDiv1");//oDiv1有3个子节点
    console.log("There nodeType of the first child node of oDiv1 is"+oDiv1.childNodes[0].nodeType);//oDiv1的第一个子节点的元素是文本节点即3
    console.log("There nodeValue of the first child node of oDiv1 is"+oDiv1.childNodes[0].nodeValue);//oDiv1的第一个子节点的值是空
    console.log("There nodeType of the second child node of oDiv1 is"+oDiv1.childNodes[1].nodeType);//oDiv1的第二个子节点的元素是元素节点即1
    console.log("There tagName of the second child node of oDiv1 is"+oDiv1.childNodes[1].tagName);//oDiv1的第二个子节点的值是p
    console.log("There nodeType of the third child node of oDiv1 is"+oDiv1.childNodes[2].nodeType);//oDiv1的第三个子节点的元素是文本节点即3
    console.log("There nodeValue of the third child node of oDiv1 is"+oDiv1.childNodes[2].nodeValue);//oDiv1的第三个子节点的值是word

    console.log("There are"+oDiv1.attributes.length+"attributes in oDiv1");//有1个属性节点在oDiv1中
    console.log("The name of attribute of oDiv1 is "+oDiv1.attributes[0].name);//属性节点的名字是div
    console.log("The nodeType of oDiv1 "+oDiv1.attributes[0].nodeType);//该节点attributes[0]为属性节点即2



    var oAtrributeNode=oDiv1.getAttributeNode("id");
    console.log("The node type of  oAtrributeNode is"+ oAtrributeNode.nodeType);

    var oTextNode=oDiv1.childNodes[0];
    console.log("The node type of oTextNode is"+ oTextNode.nodeType);

    //getElementsByTagName()(通过标签名来选中元素)
    var oUls=document.getElementsByTagName("ul");//用document.getElementsByTagName访问标签名为ul
    console.log("There are "+oUls.length+" ul in document");//有2个ul在document中

    var oList1Lis=oUls[0].getElementsByTagName("li");//用DOM来获取ul元素下的所有li元素
    console.log("There are "+oList1Lis.length+"li in the first ul");//有4个li在第一个ul元素中

    var oDocLis=document.getElementsByTagName("li");
    console.log("There are "+oDocLis.length+" li in the document");//有7个li在document


    //getElementsByClassName()(通过类名来获取元素)
    var oRadios=document.getElementsByClassName("radio");
    console.log("There are "+oRadios.length+" radio class in document.");//有2个radio class在document

     var oDivs=document.getElementsByTagName("div");
     var oRadios1=oDivs[1].getElementsByClassName("radio")//在整个document找radio
     console.log("There are "+oRadios1.length+" radio class in second div.");//在第二个div中找radio


     //querySelector
     //使用id选择器，找到以一个值为id的元素节点,这种最好使用getElementById，效率更高
     var oList1=document.querySelector("#List1");
     console.log("Line60:"+oList1.id);

    //使用元素选择器找到所有ul元素下的子元素li
     var oLis=document.querySelectorAll("ul li");
     console.log("line 64:"+oLis.length);

    //使用类选择器找到所有class为radio的元素,这种最好使用getElementsByClassName，效率更高
    var oClassRadios=document.querySelectorAll(".radio");
    console.log("line 68:"+oClassRadios.length);

    var oClassRadioDiv=document.querySelector("div.radio");
    console.log("line:71:"+oClassRadioDiv.tagName);

    var oClassDivRadio=oClassRadioDiv.querySelectorAll(".radio");
    console.log("line 74:"+oClassDivRadio.length);

     //通过伪类选择器找到第一个check状态为真的input
     var oCheckedInput=document.querySelector("input:checked");
    console.log("line 78:"+ oCheckedInput.value);

    //使用元素选择器找到所有ul元素，这种情况最好使用getElementsTagName，效率更高
    var oLists=document.querySelectorAll("ul");
    console.log("line 82:"+ oLists.length);

    //通过getElementByNmae查找元素
    var oFruitsInputs=document.getElementsByName("fruit");
    console.log("Line 86:"+oFruitsInputs[0].value);

    //getElementByNmae只能通过document访问
    //var oGenderInputs=oClassRadioDiv.getElementsByName("gender");
    //console.log("Line 89:"+oGenderInputs[0].value);

    //document.title(title字符串)
    console.log("Line 93: "+document.title);

    //document.body（body为元素对象）
    console.log("Line 96: "+document.body.tagName);

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

    //插入元素
    //document.body.appendChildoButton);

    //插入到第二个div之前
    document.body.insertBefore(oButton,oDivs[1]);

    //replaceChild:1首先找到父元素（Div1),2找到要被替换的元素，3创建替换元素
    oButton.onclick=function(){
        //元素替换
        var oDiv1=document.getElementById("Div1");//找到父元素（Div1）
        //创建替换元素
        var oPHi=document.createElement("p");
        var oPText=document.createTextNode("Hi");
        oPHi.appendChild(oPText);

        oDiv1.replaceChild(oPHi,oDiv1.childNodes[1]);//要被替换的元素
    }

    console.log("line 121:"+oDiv1.id);//对象属性
    console.log("line 122:"+oDiv1.getAttribute("id"));//对象方法
    console.log("line 123:"+oDiv1.data);//对象属性
    console.log("line 124:"+oDiv1.getAttribute("data"));//对象方法

    //使用getAttribute()方法来获取元素的某个属性的值。
    var oInsertInput=document.getElementById("insertInput");
    //oInsertInput.value="Enter";
    //使用setAttribute()方法来设置元素的某个属性的值。
    oInsertInput.setAttribute("value","Enter...");

    //hasAttribute()方法来判断元素是否含有某个属性。
    if(oInsertInput.hasAttribute("value")){
        console.log("Line 134:The value of oInsertInput: "+oInsertInput.getAttribute("value"));
    }

    //使用removeAttribute()方法来删除元素的某个属性。
    oInsertInput.removeAttribute("value");

        if(oInsertInput.hasAttribute("value")){
        console.log("Line 141:The value of oInsertInput: "+oInsertInput.getAttribute("value"));
    }

    oDiv1.removeAttribute("class");//去掉class背景
    oDiv1.setAttribute("class","div1");//增加class背景
    

}

//插入列表元素顶部
function insertToList(){
    var oInput=document.getElementById("insertInput");
    var strValue=oInput.value;
    
    //1、创建节点的方法

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

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

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

    oList1.removeChild(oLis[0]);
}

//添加到列表元素的尾部
function appendToList(){
    var oInput=document.getElementById("appendInput");
    var strValue=oInput.value;

    var oList2=document.getElementById("List2");
    var oLis=oList2.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.removeChild(oList2.lastElementChild);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1" data="自定义属性" class="div1">
            <p id="Paragraph">Hello</p>
            World
        </div>
        <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="insertToList()">插入列表元素顶部</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="appendToList()">添加到列表元素的尾部</button>
            <button onclick="removeButtom()">删除尾部元素</button>
        </div>
        <div class="radio">
            你的性别是：
            <input class="radio" type="radio" name="gender" value="女">女</input>
            <input class="radio" type="radio" name="gender"checked="true"  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> 

#Div1{
    background-color: lavender
};

ul{
    background: lightblue
};