SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
window.onload = function() {
    // document.getElementById
    var oDiv1 = document.getElementById("Div1");
    console.log("The nodeType of oDiv1 is " + oDiv1.nodeType);
    console.log("There are " + oDiv1.childNodes.length + " child nodes in oDiv1");
    console.log("The nodeType of the first child node of oDiv1 is " + oDiv1.childNodes[0].nodeType);
    console.log("The nodeValue of the first child node of oDiv1 is " + oDiv1.childNodes[0].nodeValue);
    console.log("The nodeType of the second child node of oDiv1 is " + oDiv1.childNodes[1].nodeType);
    console.log("The tagName of the second child node of oDiv1 is " + oDiv1.childNodes[1].tagName);
    console.log("The nodeType of the third child node of oDiv1 is " + oDiv1.childNodes[2].nodeType);
    console.log("The nodeValue of the third child node of oDiv1 is " + oDiv1.childNodes[2].nodeValue);

    console.log("There are " + oDiv1.attributes.length + " attributes in oDiv1");
    console.log("The name of attribute of oDiv1 is " + oDiv1.attributes[0].name);
    console.log("The nodeType of attribue of oDiv1 " + oDiv1.attributes[0].nodeType);

    // getElementsByTagName
    var oUls = document.getElementsByTagName("ul");
    console.log("There are " + oUls.length + " ul in document." );

    var oList1Lis = oUls[0].getElementsByTagName("li");
    console.log("There are " + oList1Lis.length + " li in the first ul." );

    var oDocLis = document.getElementsByTagName("li");
    console.log("There are " + oDocLis.length + " li in the document." );

    // getElementsByClassName
    var oRadios = document.getElementsByClassName("radio");
    console.log("There are " + oRadios.length + " radio class in the document." );

    var oDivs = document.getElementsByTagName("div");
    var oRadios1 = oDivs[1].getElementsByClassName("radio");
    console.log("There are " + oRadios1.length + " radio class in the second div." );
}

            
<!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="list">
            <li id = "11"> Html </li>
            <li> Javascript </li>
            <li> CSS </li>
            <li> Webpack </li>
        </ul>
        <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 class="radio" 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>