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 oAttributeNode is "+oAttributeNode.nodeType);

var oTextNode = oDiv1.childNodes[0];
console.log("The node type of oTextNode is "+oTextNode.nodeType);

//document.getElementsByTagName
var oDivs = document.getElementsByTagName("div");
console.log("The length of oDivs 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 is "+oLisInUl1.length);
console.log("The length of oLisInDoc is "+oLisInDoc.length);

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

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

var oInputs=document.querySelectorAll("input");
console.log("line 43: "+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 64: "+oNamedRadios[0].value);
oNamedRadios[1].checked=true;

var oFruits=document.getElementsByName("fruit");
console.log("Line 68: "+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]);
//替换
oDynamicButton.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 91: The id of oDiv1: "+oDiv1.id);
console.log("Line 92: The data of oDiv1: "+oDiv1.getAttribute("id"));
console.log("Line 93: The data of oDiv1: "+oDiv1.data);
console.log("Line 94: The data of oDiv1: "+oDiv1.getAttribute("data"));
console.log("Line 95: The data of oDiv1: "+oDiv1.className);
//设置属性
var oInput=document.getElementById("insertInput");
oInput.setAttribute("value","Enter");
//删除属性
oInput.removeAttribute("value");
//判断属性是否存在
if(oInput.hasAttribute("value")){
console.log("value is the attribute of oInput");
}
}

//插入列表元素顶部
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 = document.createElement("li");//创造元素节点
var oLiText=document.createTextNode(oInputText);//创建文本节点
oCreatedLi.appendChild(oLiText);
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.创建节点的方法
//2.克隆节点的方法
var oList2 = document.getElementById("List2");
var oLis = oList2.getElementsByTagName("li");

var oCreatedLi = oLis[1].cloneNode(true);
oCreatedLi.textContent = strValue;
oList2.appendChild(oCreatedLi);
} 

//删除尾部元素
function removeBottom() {
var oList1 = document.getElementById("List2");
var oLis = document.getElementsByTagName("li");

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

<!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">
        <li> Html </li>
        <li> Javascript </li>
        <li> CSS </li>
    </ul>
      <ul id="List2">
        <li> Vue </li>
        <li> React </li>
        <li> Angular </li>
    </ul>
    <button onclick="appendChild">添加列表元素</button>
    <div>
        你的性别是：
        <input type="radio" name="gender" checked="true" value="女">女</input>
        <input type="radio" name="gender" value="男">男</input>
    </div>
     <div>
        你喜欢那些水果：
        <input type="checkbox" name="furit" checked="true" value="苹果">苹果</input>
        <input type="checkbox" name="furit" value="梨">梨</input>
    </div>    
    <div id="DynamicDiv1"></div>
    <div id="DynamicDiv2"></div>
</body>
</html>