console 命令行工具 X clear

console

window.onload = function ()
 {
    //document.getElementById
    var odiv1 = document.getElementById("Div1");
    console.log("the node type of odivq is" + odiv1.nodeType);

    var oidnode = odiv1.getAttributeNode("id");
    console.log("the node type of oidnode is" + oidnode.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 divs 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);

    var olist = document.getElementsByClassName("hihihi");
    console.log("the length of olist is" + olist.length);

    var oras = odivs[1].getElementsByClassName("ra");
    console.log("the length of oras is" + oras.length);

    var ora = odivs[2].getElementsByClassName("ra");
    console.log("the length of ora is" + ora.length);

    //querySelectorAll查询所有含该标签的分支
    var oinputs = document.querySelectorAll("input");
    console.log(oinputs.length);

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

    var oClass = document.querySelectorAll(".ra");
    oClass[0].checked = true;

    var oL11 = document.querySelector("#L11");
    oL11.style.color = "red";

    var oLi2 = document.querySelectorAll("#List2 li");
    oLi2[0].style.color = "red";
    oLi2[1].style.color = "green";
    oLi2[2].style.color = "blue";

    var oName = document.getElementsByName("gender");
    console.log(oName[0].value);
    oName[1].checked = true;

    var oName2 = document.getElementsByName("furit");
    console.log(oName2[0].value);
    oName2[0].checked = false;

    //console. log(document . body. chi ldNodes . length)

    oDynamicButton. appendChild(oTextNode);

    //document . body . appendChild(oDynamicButton);
    document.body.insertBefore (oDynamicButton, ouls[0]);

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

    //创建简单元素
    var oDynamicButton=document.createElement("button");
    var oTexNode=document.createTextNode("替换");

    oDynamicButton.appendChild(oTexNode);

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

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

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

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

    var oU1 = document. getElementById("List1"); 
    var olis = oU1. getElementsByTagName("li"); 

    var oCreatedLi = document.createElement("1i");
    var oLiText = document.createTextNode(oInputText);
    
    oCreatedLi.appendChild(oLiText);
    oU1.insertBefore(oCreatedLi, oLi2[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 ;
    var oList2 = document.getElementById("List2"); 
    var oLis = oList2.getElementsByTagName("1i");
    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" class="hihihi">
        <li id="L11"> Html </li>
        <li> Javascript </li>
        <li> CSS </li>
    </ul>
    <input id="insertinput value="H1"></input>
    <button onclick="insertChild()">添加到列表顶部</button>
    <button onclick="removeTop()">删除列表顶部</button>
    <ul id="List2" class="hihihi">
        <li> Vue </li>
        <li> React </li>
        <li> Angular </li>
    </ul>
    <input id="insertinput value="H2"></input>
    <button onclick="appendToList()">添加到列表尾部</button>
    <button onclick="removeBottom()">删除列表尾部</button>
    <div>
        你的性别是：
        <input class="ra" type="radio" name="gender" checked="true" value="女">女</input>
        <input class="ra" 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;
}