console 命令行工具 X clear

console

window.onload = function () {
    var odiv1 = document.getElementById("Div1");
    console.log(odiv1.nodeType)

    var oatt = odiv1.getAttributeNode("id")
    console.log(oatt)

    var otext = odiv1.childNodes[0]
    console.log(otext.length)

    var oDivs = document.getElementsByTagName("div")
    console.log(oDivs.length)

    var ouls = document.getElementsByTagName("ul")
    var oLis = ouls[0].getElementsByTagName("li")
    var oLisDOC = document.getElementsByTagName("li")

    console.log(oLis.length)
    console.log(oLisDOC.length)

    var olists = document.getElementsByClassName("list")
    console.log(olists.length)

    var oradios = oDivs[1].getElementsByClassName("radio")
    console.log(oradios.length)

    var oinputfemale = document.querySelector("input:checked")
    console.log(oinputfemale.value)

    //  var oinputs=document.querySelectorAll("input")
    //  console.log(oninput.length)

    var oclassinputs = document.querySelectorAll(".radio")
    oclassinputs[0].checked = true;

    var ols = document.querySelector("#ls")
    ols.style.color = "red"

    var oList2 = document.querySelectorAll("#List2 li")
    oList2[0].style.color = "blue"
    oList2[1].style.color = "green"

    var oname = document.getElementsByName("gender")
    oname[1].checked = true
    var oname = document.getElementsByName("furit")
    oname[1].checked = true

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

    // var obutton = document.createElement("button")
    // var otext = document.createTextNode("提交")
    // obutton.appendChild(otext)
    // document.body.insertBefore(obutton, ouls[0])
    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("Line114"+odiv1.id)
    console.log("Line114"+odiv1.data)
    console.log("Line114"+odiv1.getAttribute("data"))

    var oInput=document.getElementById("insertinput")
    oInput.value="Enter...."
}



// function insertchild(){



// function insertChild() {
//     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]);
// } 
// insertChild()

function topremove() {

    // var btn=document.getElementById("btn")
    var obtn = document.createElement("input")
    obtn.id = "btn"
    obtn.type = "button"
    obtn.value = "删除"
    oDiv11 = document.getElementById("List1")
    var oson=oDiv11.getElementsByTagName("li")
    
    document.body.insertBefore(obtn, oDiv11)
    obtn.onclick=function(){
        oDiv11.removeChild(oson[0])
    }
    document.body.appendChild(obtn.cloneNode(1))
}
topremove()

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
     
        <div id="Div1",data="userDefind" class="div1">
            <p id="Paragraph">Hello</p>
            World
        </div>
        <ul id="List1" class="list">
            <li id = "ls"> Html </li>
            <li> Javascript </li>
            <li> CSS </li>
            <li> Webpack </li>
        </ul>
        <input id="insertinput" value="Hello"></input>
        <ul id="List2" class="list">
            <li> Vue </li>
            <li> React </li>
            <li> Angular </li>
        </ul>
        <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="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;
}
#Div1{
    background: lavender
}