SOURCE

window.onload = function() {
    //第1题：完成通过getElementById, getElementsByTagName, getElementsByClassName的练习
    var oDiv1 = document.getElementById("Div1");
    console.log("The nodeType of oDiv1 is " + oDiv1.nodeType);
    console.log("There are " + oDiv1.childNodes.length + "child 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 third 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);

    //getElementByTagName
    var oUls = document.getElementsByTagName("ul");
    console.log("There are " + oUls.length + " ul in documwnt.")

    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 documwnt.");

    var oDivs = document.getElementsByTagName("div");
    var oRadios1 = oDivs[1].getElementsByClassName("radio");
    console.log("There are " + oRadios1.length + " radio class in the second div.");

    //第2题：完成querySelector, querySelectorAll的练习
    //querySelector
    //使用id选择器去找到第一个值为id名的元素节点
    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);
    oLis[0].style.color = "red";
    oLis[1].style.color = "blue";
    oLis[2].style.color = "green";

    //使用元素选择器去找到所有class为radio的元素，这种情况，尽量使用getElementsByClassName，效率更高
    var oClassRadio = document.querySelectorAll(".radio");
    console.log("Line 46: " + oClassRadio.length);

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

    //使用选择器查找第一个class为radio的div元素下所有class为radio的子元素
    var oClassDivRadios = oClassRadioDiv.querySelectorAll(".radio");
    console.log("Line 52: " + oClassDivRadios.length);

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

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

    //第3题：​完成getElementsByName的练习
    //getElementsByName
    var oFruitInputs = document.getElementsByName("fruit");
    console.log("Line 66: " + oFruitInputs[0].value);

    //第4题：理解document.title和document.body
    //document.title
    console.log("Line 76: " + document.title);

    //document.body
    console.log("Line 80: " + document.body);

    //创建一个简单的button,把它插入到文档的尾部
    var oButton = document.createElement("button");
    var oTextNode = document.createTextNode("替换");
    oButton.appendChild(oTextNode);

    //document.body.appendChild((oButton));

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

    //第7题：完成replaceChild的练习
    //replaceChild
    oButton.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 103:" + oDiv1.id);
    console.log("Line 104:" + oDiv1.getAttribute("id")); 
    console.log("Line 105:" + oDiv1.data);
    console.log("Line 106:" + oDiv1.getAttribute("data"));

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

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

    //通过元素对象方法删除属性
    oInsertInput.removeAttribute("value");

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

    oDiv1.removeAttribute("class");
    //oDiv1.setAttribute("class","div1");*/
} 

//第5题：（1）在List1的列表顶端添加删除元素
function insertChild() {
    var oInput = document.getElementById("insertInput");
    var strValue = oInput.value;

    //1. 创建节点的方法
    var oList1 = document.getElementById("List1");
    var textNode = document.createTextNode(strValue);
    //动态创建一个li元素
    var oLi1 = document.createElement("li");
    //将文本节点插入li元素中去
    oLi1.appendChild(textNode);
    //将li元素插入到ul的第1个子元素前面
    oList1.insertBefore(oLi1, oList1.firstElementChild);

    //2. 克隆节点的方法
    /*var oList1 = document.getElementById("List1");
    var oLis = document.getElementsByTagName("li");
    var oCreatedLi = oLis[0].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]);
} 

//第5题：（2）在List2的列表尾部添加删除元素，
function appendChilds(){

    var oInput1 = document.getElementById("appendInput");
    var strValue1 = oInput1.value;

    //1. 创建节点的方法
    /*var oUl = document.getElementById("List2");
    var oValue = document.getElementById("appendInput");
    var textNode = document.createTextNode(oValue.value);
    //动态创建一个li元素
    var oLi = document.createElement("li");
    //将文本节点插入li元素中去
    oLi.appendChild(textNode);
    //将li元素插入ul元素中去
    oUl.appendChild(oLi);*/

    //2.克隆节点的方法
    var oList2=document.getElementById("List2");
    var oLiss = document.getElementsByTagName("li");
    //克隆最后一个节点
    var oCloneLi = oLiss[2].cloneNode(true);
    oCloneLi.textContent = strValue1;

    oList2.appendChild(oCloneLi,oLiss[2]);

}
function removeBottom() {
    var oUl1 = document.getElementById("List2");
    var oLi1 = document.getElementsByTagName("li");
 
     //删除最后一个子元素
    oUl1.removeChild(oUl1.lastElementChild);
} 

/*第6题：理解insertBefore和appendChild
  A.insertBefore(B,C) A,B,C分布代表什么
  答：A代表父元素，B代表插入的元素，C代表新插入元素的后一个元素，即在此元素前插入一个新元素
  A.appendChild(B) A, B分布代表什么
  答：A代表父元素，B代表插入的元素*/

/*第7题：完成replaceChild的练习(在上面)
  A.replaceChild(B,C) A,B,C分布代表什么
  答：A代表父元素；B代表要替换的元素；C代表要被替换的元素。*/

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1" data="自定义属性">
            <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="appendChilds()">添加到列表元素的尾部</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;
}