SOURCE

window.onload=function(){
    //doucment.getElementById 单个 只能接document
    var oDiv1 = document.getElementById("Div1");
    console.log("The node type of oDiv1 is"+oDiv1.nodeType);

    var oAttributeNode = oDiv1.getAttribute("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);
   
    //getElementsByTagName 多个
    
    var oUls = document.getElementsByTagName("ul");
    console.log("There are " + oUls.length + " ul in document." );
   
    var oDivs = document.getElementsByTagName("div");
    console.log("The Length of oDivs is"+oDivs.length);

    if(oDiv1==oDivs[0])
    {
        console.log(" we are same type");
    }

    //getElementsByClassName

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

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

    //通过元素选择器查找所有input元素，这种最好使用getElementsByTagName,效率更高
    var oInputs = document.querySelectorAll("input");
    console.log("line 57:" + oInputs.length); 

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

    //通过类选择器查找第一个id为radio的元素，这种getElementsByClassName,效率更高
    var oClassInputs = document.querySelectorAll(".radio");
    oClassInputs[0].checked = true;
    
    //通过id选择器查找第一个id为Li11的元素，这种最好使用getElementById，效率更高
    var oLi11 =document.querySelector("#Li11");
    oLi11.style.color = "red";

    //查找父元素的id为List的所有li元素
    var oList2Lis = document.querySelectorAll("#List2 li");
    oList2Lis[0].style.color = "blue";
    oList2Lis[1].style.color = "green";
    oList2Lis[2].style.color = "orange";

    //通过getElementsByName查找元素
    var oNamedRadios = document.getElementsByName("gender");
    console.log("Line 80:" + oNamedRadios[0].value);
    oNamedRadios[1].checked = true;

    var oFruits = document.getElementsByName("fruit");
    console.log("Line 80:"+ oFruits[0].value);
    oFruits[0].checked = false;

    console.log(document.title);
    console.log(document.body.tagName);

    //创简单建元素

    var oDynamicButton = document.createElement("button");
    var oTextNode = document.createTextNode("替换");

    oDynamicButton.appendChild(oTextNode);

    document.body.insertBefore(oDynamicButton,oUls[0]);

    //创建可以动态添加对象的元素
    var oAppendInput = document.createElement("input");
    console.log("1");


    //替换元素
    oDynamicButton.onclick = function(){
        //
        var oDiv1 = document.getElementById("Div1");
        //创建Hi节点
        var oPHi = document.createElement("p");
        var oPText = document.createTextNode("Hi");
        oPHi.appendChild(oPText);

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

//查看属性
console.log("Line 114: The id of oDiv1:"+oDiv1.id);
console.log("Line 115: The data of oDiv1:"+oDiv1.getAttribute("id"));
console.log("Line 116: The data of oDiv1:"+oDiv1.data);//不能通过对象属性获取自定义属性的值
console.log("Line 117: The data of oDiv1:"+oDiv1.getAttribute("data"));

console.log("Line 114:The class of oDiv1"+ oDiv1.className);

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

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

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

function insertChild()
{
    var oInput =document.getElementById("insertInput");
    var oInputText = oInput.value;

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

    var oCreatedLi = document.createElement("li");
    var oLiTest = document.createTextNode(oInputText);
    oCreatedLi.appendChild(oLisText);
    oUl.insertBefore(oCreatedLi,oLis[0]);
}

function appendChild()
{
    var oInput =document.getElementById("insertInput");
    var oInputText = oInput.value;

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

    var oCreatedLi = document.createElement("li");
    oCreatedLi.appendChild(oLisText);
    oUl.appendChild(oLi);
}

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]);
}

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

oUl.removeChild(oLis[0]);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1">
            <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="insertChild()">插入列表元素顶部</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="appendChild()">添加到列表元素的尾部</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-color:aquamarine
};

list{
    background-color:lightblue;
};