SOURCE

window.onload=function(){
    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)

    //获取所有div
    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 oListUl1=oUls[0].getElementsByTagName("li");
    var oListUls=document.getElementsByTagName("li");

    console.log("The length of oListUl1 is "+oListUl1.length);
    console.log("The length of oListUls is "+oListUls.length);

    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 oLists is "+oRadios.length);
    
    var oRadios3=oDivs[2].getElementsByClassName("radio");
    console.log("The length of oLists is "+oRadios3.length);

    //querySelector选择器
    //通过伪类选择器选择第一个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);
    //把女生check去掉，加到男生那
    oInputs[1].checked=true;
    oInputs[3].checked=true;
    //oInputFemale.checked=true;

    //通过类选择器查找所有class未radio的元素，最好使用getElementsByClass
    var oClassInputs=document.querySelectorAll(".radio");
    oClassInputs[0].checked=true;

    //通过id选择器查找第一个id为Li11的元素，最好使用getElementById
    //找到id，变色
    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="gray";

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

    var oFurits=document.getElementsByName("furit");
    console.log("Line 81: "+oFurits[0].value);
    oFurits[0].checked=false;

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

    //console.log(document.body.childNodes.length);//子节点

    //创建元素节点
    var oDynamicButton=document.createElement("button");
    //创建文本节点
    var oTextNode=document.createTextNode("替换");
    //把文本节点插入元素节点
    oDynamicButton.appendChild(oTextNode);
    //将元素节点插入到已有元素中
    document.body.insertBefore(oDynamicButton,oUls[0]);
    //将元素节点从已有元素中删除
    //document.body.removeChild(oDynamicButton,oUls[0]);

    oDynamicButton.onclick=function(){
        //找到该元素的id
        var oDiv1=document.getElementById("Div1");
        var oPHi=document.createElement("p");
        var oPText=document.createTextNode("Hi")
        oPHi.appendChild(oPText);

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

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

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

    console.log("line 114: The class of oDivl: "+oDiv1.className);
    //设置属性
    var oInput=document.getElementById("insertInput");
    //oInput.value="Enter...";
    oInput.setAttribute("value","Enter");

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

    //判断属性是否存在
    if(oInput.hasAttribute("value")){
        console.log("存在")
    }else{
        console.log("不存在")
    }
    /*if(oUls[0].hasAttribute("class")){
        console.log("存在")
    }else{
        console.log("不存在")
    }*/

}
//为按钮添加点击事件
function insertChild(){
    //找到文本框的id元素
    var oInput=document.getElementById("insertInput");
    //在文本框内输入内容
    var oInputText=oInput.value;
    //输出文本框内容
    console.log(oInputText);
    //获取父元素：找到id为list1的元素，找到标签li元素
    var oUl=document.getElementById("List1");
    var oLis=oUl.getElementsByTagName("li");
    //动态创建一个li元素
    var oCreatedLi=document.createElement("li");
    //将文本框内容转换为文本节点
    var oLiTest=document.createTextNode(oInputText);
    //将文本节点插入li元素中去
    oCreatedLi.appendChild(oLiTest);
    //将li元素插入到ul元素的顶部中去
    oUl.insertBefore(oCreatedLi,oLis[0]);
}
//删除元素
function removeChild1(){
    //获取父元素：找到id为list1的元素，找到标签li元素
    var oUl=document.getElementById("List1");

    oUl.removeChild(oUl.firstChild);  
}

function appendToList(){
    //找到文本框的id元素
    var oInput=document.getElementById("appendInput");
    //在文本框内输入元素，并输出文本框内容
    var oInputText=oInput.value;
    console.log(oInputText);
    //获取父元素：找到id为list2的元素，找到标签li元素
    var oUl=document.getElementById("List2");
    var oLis=oUl.getElementsByTagName("li");
    /*//动态创建一个li元素
    var oCreatedLi=document.createElement("li");
    //clonnode复制节点
    var oClonedLi=document.body.appendChild(oInput.cloneNode(true));
    //将复制的节点插入li元素中去
    oCreatedLi.appendChild(oClonedLi);
    //将li元素插入到ul元素底部中去
    oUl.insertBefore(oCreatedLi,oLis[-1]);*/
    var oCreatedLi=oLis[1].cloneNode(true);
    oCreatedLi.textContent=oInputText;

    oUl.appendChild(oCreatedLi);
}
//删除元素
function removeChild2(){
    //获取父元素：找到id为list1的元素，找到标签li元素
    var oUl=document.getElementById("List2");

    oUl.removeChild(oUl.lastChild);  
}

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="Div1" class="div1" data="undefined">
        <p id="Paragraph">Hello</p>
        World
    </div>
    <ul id="List1" class="list">
        <li id = "Li11"> Html </li>
        <li> Html </li>
        <li> Javascript </li>
        <li> CSS </li>
    </ul>
    <input id="insertInput" type="text"></input>
    <button onclick="insertChild()">插入列表元素顶部</button>
    <button onclick="removeChild1()">删除</button>
      <ul id="List2" class="list">
        <li> Vue </li>
        <li> React </li>
        <li> Angular </li>
    </ul>
    <input id="appendInput" type="text"></input>
    <button onclick="appendToList()">添加到列表元素的尾部</button>
    <button onclick="removeChild2()">删除</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="furit" checked="true" value="苹果">苹果</input>
        <input type="checkbox" name="furit" value="梨">梨</input>
    </div>    
    <div id="DynamicDiv1"></div>
    <div id="DynamicDiv2"></div>
</body>
</html> 

ul{
    background: lightblue;
}