SOURCE

console 命令行工具 X clear

                    
>
console
window.onload = function() {
var oDiv1=document.getElementById("Div1");
console.log("oDiv1的节点类型为"+oDiv1.nodeType);
console.log("在oDiv1中有"+oDiv1.childNodes.length+"个子节点");
console.log("oDiv1的第一个子节点nodetype值为"+oDiv1.childNodes[0].nodeType);
console.log("oDiv1的第一个子节点值为"+oDiv1.childNodes[0].nodeValue);
console.log("oDiv1的第二个子节点nodetype值为"+oDiv1.childNodes[1].nodeType);
console.log("oDiv1的第二个子节点值为"+oDiv1.childNodes[1].tagName);
console.log("oDiv1的第三个子节点nodetype值为"+oDiv1.childNodes[2].nodeType);
console.log("oDiv1的第三个子节点值为"+oDiv1.childNodes[2].nodeValue);

console.log("oDiv1的属性个数为"+oDiv1.attributes.length);
console.log("oDiv1的属性名为"+oDiv1.attributes[0].name);
console.log("oDiv1属性的nodetype值为"+oDiv1.attributes[0].nodeType);

var oUls=document.getElementsByTagName("ul");
console.log("document中ul的个数为"+oUls.length);

var oList1Lis=oUls[0].getElementsByTagName("li");
console.log("有"+oList1Lis.length+"个li在第一个ul中");

var oDocLis=document.getElementsByTagName("li");
console.log("有"+oDocLis.length+"个li在document中");

var oRadios=document.getElementsByClassName("radio");
console.log("有"+oRadios.length+"个radio类在document中");

var oDivs=document.getElementsByTagName("div");
var oRadios1=oDivs[1].getElementsByClassName("radio");
console.log("有"+oRadios1.length+"个radio类在第二个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>