SOURCE

window.onload = function() {
    //document.getElementById
    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 nodeValue of the second child node of oDIV1 is"+oDiv1.childNodes[1].nodeValue);
    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 attribue of oDiv1"+oDiv1.attributes[0].nodeType);

    //getELementByTagName
    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 u1");

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

    //使用ID选择器去找到第一个值为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);

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

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

    var oClassDivRadios=oClassRadioDiv.querySelectorAll(".radio");
    console.log("Line 52:"+oClassDivRadios.length);

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

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

    //getElementByName
    var oFruitInputs =document.getElementsByName("fruit");
    console.log("Line 66:"+ oFruitInputs[0].value);

    // document.title
    console.log("Line 76:"+document.title);


    // document.body
    console.log("Line 80:"+document.body.tagName);
    //建一个简单的button
    var oButton = document.createElement("button");
    var oTextNode = document.createTextNode("提交");
    oButton.appendChild(oTextNode);

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


    // replaceChild
    oButton.onclick = function(){
        var oDiv1 = document.getElementById("Div1");
        var oPHI = document.createElement("p");
        var oPHITEXT = document.createTextNode("Hi");
        oPHI.appendChild(oPHITEXT);

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

    //通过对象属性方法获取属性，查看属性
    console.log("Line 103:"+oDiv1.id);
    console.log("Line 103:"+oDiv1.getAttribute("id"));
    console.log("Line 103:"+oDiv1.data);
    console.log("Line 103:"+oDiv1.getAttribute("data"));

    //设置属性
    var oInserInput = document.getElementById("insertInput");
    oInserInput.scroll("value","Enter......")

    //判断属性是否存在
    if(oInserInput.hasAttribute("value")){
        console.log("Line 107:The value of oInsertInput:"+ oInserInput.getAttribute("value"));
    }

    //删除属性
    oInserInput.removeAttribute("value");

    if(oInserInput.hasAttribute("value")){
        console.log("Line 111:The value of oInsertInput:"+ oInserInput.getAttribute("value"));
    }
    oDiv1.removeAttribute("class");
  //  oDiv1.setAttribute("class","div1");
  /*判断属性是否存在
  if(oInput.hasAttribute("value"))
  {
      console.log("存在")
  }
  else 
  {
      console.log("不存在")
  }*/

} 


//【创建元素方法】
function insertChild()
{
    //通过id来获取列表顶部元素 
    var oUl =document.getElementById("List1");
    //将文本框的内容转换为“文本节点”
    var oTxt =document.getElementById("insertInput");
    var textNode=document.createTextNode(oTxt.value);
    //动态创建一个li 元素
    var oLi=document.createElement("li");
    //将文本节点插入li元素中去
    oLi.insertBefore(textNode,oLi[0]);
    //将li元素插入ul里面去
    oUl.insertBefore(oLi,oLi[0]);
}

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

    oList1.removeChild(oLis[0]);
}

//【克隆节点方法】
/*function insertChild()
{
    //识别文本框，并将文本框转换为“文本节点”
    var oInput =document.getElementById("insertInput");
    var strValue=oInput.value;

    //克隆节点的方法
    //获取到List1
    var oList1=document.getElementById("List1");
    //获取到List1中的li
    var oLis=document.getElementsByTagName("li");
    //克隆第一个节点HTML为要输入的值
    var oCreatedLi =oLis[0].cloneNode(true);
    //只需要改克隆的值为我要输入的值即可 
    oCreatedLi.textContent = strValue;

    //插入List1的顶部，
    oList1.insertBefore(oCreatedLi, oLis[0]);
}

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

    oList1.removeChild(oLis[0]);
}*/



//【创建元素方法】
function appendChild2()
{
    //通过id来获取列表尾部元素 
    var oUl =document.getElementById("List2");
    //将文本框的内容转换为“文本节点”
    var oTxt =document.getElementById("appendInput");
    var textNode=document.createTextNode(oTxt.value);
    //动态创建一个li 元素
    var oLi=document.createElement("li");
    //将文本节点插入li元素中去
    oLi.appendChild(textNode);
    //将li元素插入ul里面去
    oUl.appendChild(oLi);
}

function removeButtom()
{
    var oUl=document.getElementById("List2");

    oUl.removeChild(oUl.lastElementChild);
}






//【克隆方法】
function appendChild2()
{
    //识别文本框，并将文本框转换为“文本节点”
    var oInput =document.getElementById("appendInput");
    var strValue=oInput.value;

    //创建节点的方法


    //克隆节点的方法
    //获取到List2
    var oList1=document.getElementById("List2");
    //获取到List2中的li
    var oLis=document.getElementsByTagName("li");
    //克隆第一个节点HTML为要输入的值
    var oCreatedLi =oLis[1].cloneNode(true);
    //只需要改克隆的值为我要输入的值即可 
    oCreatedLi.textContent = strValue;

    //插入oList1的尾部，
    oList1.appendChild(oCreatedLi);
}

function removeButtom()
{
   var oUl=document.getElementById("List2");

    oUl.removeChild(oUl.lastElementChild);
}

// 理解insertBefore和appendChild
/*
A.insertBefore(B,C) A,B,C分布代表什么
在父元素中某个子元素前插入元素
A=父元素
B=需要插入的元素
C=父元素中要插入的子元素
*/
/*
A.appendChild(B) A, B分布代表什么
在父元素下的子元素里的末尾插入一个元素
A=父元素
B=需要插入的元素
*/
/*
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">
            <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="appendChild2()">添加到列表元素的尾部</button>
            <button onclick="removeButtom()">删除尾部元素</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>