SOURCE

window.onload=function(){
    //document.getElementById
    var oDiv1=document.getElementById("Div1");
    console.log("The node type of oDiv1 is "+oDiv1.nodeType); //元素节点
    
    var oAttributeNode=oDiv1.getAttributeNode("id");
    console.log("The node type of oDiv1 is "+oAttributeNode.nodeType); //属性节点


    var oTextNode=oDiv1.childNodes[0]; //所有子节点中的第一个子节点
    console.log("The node type of oDiv1 is "+oTextNode.nodeType); //文本节点

    //document.getElementsByTagName 获取元素-类数组，只能用length属性和下标方式
    var oDivs=document.getElementsByTagName("div");

    console.log("The length of oDiv is "+oDivs.length);
    
    if(oDiv1==oDivs[0]){
       console.log("We are the same node.");
    }

    var oUls = document.getElementsByTagName("ul");
    var oLisInUl1 = oUls[0].getElementsByTagName("li");
    var oLisInDoc = document.getElementsByTagName("li")

    console.log("The length of oLisInUl1 "+oLisInUl1.length);
    console.log("The length of oLisInDoc "+oLisInDoc.length);
    
    //document.getElementsByClassName 

    var oLists= document.getElementsByClassName("list");
    console.log("The length of oLists "+oLists.length);
    
    var oRadios = oDivs[1].getElementsByClassName("radio");
    console.log("The length of oRadios "+oRadios.length);

    var oRadios3 = oDivs[2].getElementsByClassName("radio");
    console.log("The length of oRadios3 "+oRadios3.length);


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

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

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

//通过类选择器查找所有class为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为List2的所有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 71:" + oNamedRadios[0].value);
oNamedRadios[1].checked = true;

var oFruits = document.getElementsByName("fruit");
console.log("Line 75：" + 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]); //把按钮插入到oUls[0]位置之前

//创建可以动态添加对象的元素,替换 replaceChild()
var oAppendInput = document.createElement("input"); 
var oDynamicButton = document.createElement("button");  //按钮创建
var oTextNode = document.createTextNode("替换");  //文本创建

oDynamicButton.appendChild(oTextNode);  //把文本放入到按钮中

document.body.insertBefore(oDynamicButton,oUls[0]); //把按钮插入到oUls[0]位置之前

oDynamicButton.onclick=function(){  //点击替换函数
    var oDiv1=document.getElementById("Div1");  //获取到Div1
    var oPHi=document.createElement("P");  //创建节点P
    var oPText=document.createTextNode("Hi"); //创建文本Hi
    oPHi.appendChild(oPText); //把文本Hi放在节点P后面
    //在Div1里面发生替换，替换元素：oPHi  替换的位置：childNodes[1] 
    oDiv1.replaceChild(oPHi,oDiv1.childNodes[1]);
}

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

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

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

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

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

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


}

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

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

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

function appendChild()
{    
    var oInput = document.getElementById("appendInput");
    var oInputText = oInput.value;
    console.log(oInputText);

    var oUls = document.getElementById("List2");
    var oLis = document.getElementsByTagName("li");

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

function insertToList()
{
    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里面插入，插入的元素oCreatedLi，插入位置oLis[0]
    oUl.insertBefore(oCreatedLi, oLis[0]);  
}

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

    oUl.removeChild(oLis[0]);
}

function appendToList()
{
    var oInput = document.getElementById("appendInput");
    var strValue = oInput.value;
    //1.创建节点的方法
    //1.克隆节点的方法

    var oList2 = document.getElementById("List2");
    var oLis = oList2.getElementsByTagName("li");

    var oCreatedLi = oLis[1].cloneNode(true);
    oCreatedLi.textContent = strValue;
    //在oUl里面插入，插入的元素oCreatedLi，插入位置oLis[0]
    oList2.appendChild(oCreatedLi);  
}

function removeBottom()
{
    var oList1 = document.getElementById("List2");
    var oLis =document.getElementsByTagName("li");

    oList2.removeChild(oLis[oLis.length-1]);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1" data="userDefined" class="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>
        <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: lightblue;
};

#Div1{
    background-color: lavender;
};