SOURCE

window.onload = function() {
    //document.getElementById  返回一个元素  只有document才有
    var oDiv1=document.getElementById("Div1");
    console.log("The node type of oDiv1 is"+oDiv1.nodeType);
    console.log("There are"+oDiv1.childNodes.length+" chld nodes in oDiv1");
    console.log("The nodetype of the first child node of oDiv1 is"+oDiv1.childNodes[0].nodeType);
    console.log("The nodeValue of the first child node of oDiv1 is"+oDiv1.childNodes[0].nodeValue);
    console.log("The nodetype of the second child node of oDiv1 is"+oDiv1.childNodes[1].nodeType);
    console.log("The tagName of the second child node of oDiv1 is"+oDiv1.childNodes[1].tagName);
    console.log("The nodetype of the third child node of oDiv1 is"+oDiv1.childNodes[2].nodeType);
    console.log("The nodeValue of the first child node of oDiv1 is"+oDiv1.childNodes[2].nodeValue);

    console.log("There are"+oDiv1.attributes.length+" attributes in oDiv1");
    console.log("The name of attribute of oDiv1 is"+oDiv1.attributes[0].name);
    console.log("The nodetype of attribute of oDiv1 is"+oDiv1.attributes[0].nodetype);


   // getElementsByTagName  返回多个元素
    var oUls = document.getElementsByTagName("ul");
    console.log("There are " + oUls.length + " ul in document." );

    var oList1Lis = oUls[0].getElementsByTagName("li");
    console.log("There are " + oList1Lis.length + " li in the first ul." );

    var oDocLis = document.getElementsByTagName("li");
    console.log("There are " + oDocLis.length + " li in the document." );


    // getElementsByClassName
    var oRadios = document.getElementsByClassName("radio");
    console.log("There are " + oRadios.length + " radio class in the document." );

    var oDivs = document.getElementsByTagName("div");
    var oRadios1 = oDivs[1].getElementsByClassName("radio");
    console.log("There are " + oRadios1.length + " radio class in the second div." );
 
    //querySelector
    //使用id选择器去找第一个有元素为id的名的元素节点为list1   id要用# 
    //这种情况尽量使用getElementById，效率更高
    var oList1=document.querySelector("#List1");
    console.log("Line 38："+oList1.id);

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

    //Line46,使用类选择器找到所有class 为radio的元素 有三个,
    //这种情况尽量使用getElementsByClassName会效率更高
    var oClassRadios=document.querySelectorAll(".radio");
    console.log("Line 46："+oClassRadios.length);

    //Line49,使用选择器查找第一个class为radio的div元素
    var oClassRadioDiv=document.querySelector("div.radio");
    console.log("Line 49："+oClassRadioDiv.tagName);

    //Line52,使用选择器查找第一个class为radio的div元素下所有class为radio的子元素
    //或者再上一个的情况以下是否能找到两个radio
     var oClassDivRadios = oClassRadioDiv.querySelectorAll(".radio");
    console.log("Line 52: " + oClassDivRadios.length);   

    //Line58,使用伪类选择器找到第一个checked状态为真的input
    var oCheckedInput = document.querySelector("input:checked");
    console.log("Line 58: " + oCheckedInput.value);

    //Line62,使用元素选择器找到所有的ul元素，这种情况最好使用getElementsByTagName会效率更高
    var oLists = document.querySelectorAll("ul");
    console.log("Line 62: " + oLists.length);

    //66 getElementsByName  只有document才能用
    var oFruitInputs = document.getElementsByName("fruit");
    console.log("Line 66: " + oFruitInputs[0].value)

    //var oGenderInputs = oClassRadioDiv.getElementsByName("gender");
    //console.log("Line 66: " + oGenderInputs[0].value)

    //document.title  title实际上是一个字符串
    console.log("Line 76:"+document.title);
 
    //document.body body不是字符串而是Element（元素）
    console.log("Line 80:"+document.body.tagName);

    //创建，插入元素
    //创建一个简单的button,把它插入到文档的末尾
    var oButton=document.createElement("button");
    //给button设名字
    var oTextNode=document.createTextNode("替换");
    //组装
    oButton.appendChild(oTextNode);
    //插入到body的末尾
    //document.body.appendChild(oButton);
    //插入到第一个div
    document.body.insertBefore(oButton,oDiv1[1]);

    //替换 replaceChild
    //首先要找到父元素Div1，然后找到要替换的元素childNodes[1]，创建替换的元素oPHi
    oButton.onclick=function(){
        var oPHi=document.createElement("p");
        var oPHiText=document.craterTexNode("Hi");
        oPHi.appendChild(oPHiText);
        oDiv1.replaceChild(oPHi,oDiv1.childNodes[1]);
    }
   //getAttribute 通过元素对象属性和对象方法获取属性
    console.log("line 103:"+oDiv1.id);
    console.log("line 104:"+oDiv1.getAttribute("id"));
    console.log("line 103:"+oDiv1.data);
    console.log("line 104:"+oDiv1.getAttribute("data"));

    //通过元素对象属性和对象方法设置属性
    var oInsertInput=document.getElementById("insertInput");
    //oInsertInput.value="Enter";
    oInsertInput.setAttribute("value","Enter..");

    //通过元素对象方法判断属性是否存在
    if(oInsertInput.hasAttribute("value")){
        console.log("Line 116:The value of oInsertInput"+oInsertInput.getAttribute("value"));
    }

    //通过元素对象方法判断属性是否存在
    if(oInsertInput.hasAttribute("value")){
        console.log("Line 123:The value of oInsertInput"+oInsertInput.getAttribute("value"));
    }

    oDiv1.removeAttribute("class");
}
 //写一个函数
function insertChild() {
    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]);
}

//appendChild就是插入到尾部
function appendChild(){
    var oInput = document.getElementById("insertInput");
    var strValue = oInput.value;
    //1. 创建节点的方法

    //2. 克隆节点的方法
    var oList2 = document.getElementById("List2");
    var oLis = document.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.removeButtom(oLis[0]);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1">
            <p id="Paragraph">Hello</p>
            World
        </div>
        <div>
            <ul id="List1" class="list">
                <li id = "11"> 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>
        </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="appendChild()">添加到列表元素的尾部</button>
            <button onclick="removeBottom()">删除尾部元素</button>
        </div>
        <div class="radio">
            你的性别是：
            <input class="radio" type="radio" name="gender" checked="true" value="女">女</input>
            <input class="radio" type="radio" name="gender" 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>

.list {
    background-color: lightblue;
}

.Div1 {
    background-color: lavender;
}