console 命令行工具 X clear

console

window.onload = function() {
    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 nodeValue of the second child node of oDiv1 is"+oDiv1.childNodes[1].nodeValue);
    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 attribute of oDiv1 is "+oDiv1.attributes[0].nodeType);

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

    //querySelector
//使用id选择器找到第一个元素为id的元素,这种情况，尽量使用getElementById,效率更高
var oList1=document.querySelector('#List1');
console.log('Line 39:'+oList1.id);
//使用元素选择器找到所有的ul元素下的li元素
var oLis=document.querySelectorAll('ul li');
console.log(oLis.length);

//使用类选择器找到所有class为radio的元素，这种情况，尽量使用getElementByClassName,效率更高
var oClassRadios=document.querySelectorAll('.radio');
console.log(oClassRadios.length);

var oClassRadioDiv=document.querySelector('div.radio');
console.log(oClassRadioDiv.tagName);

var oClassDivRadios=oClassRadioDiv.querySelectorAll('.radio');
console.log(oClassDivRadios.length);

//使用伪类选择器找到第一个checked状态为真的input
var oCheckedInput=document.querySelector('input:checked');
console.log(oCheckedInput.value);

//使用元素选择器找到所有ul元素，这种情况，尽量使用getElementByTagName,效率最高
var oLists=document.querySelectorAll('ul');
console.log(oLists.length);
//getElementsByName
//var oFruitInputs=document.getElementsByName('fruit');
//console.log(oFriutInputs[0].value);

var oGenderInputs=document.getElementsByName('gender');
console.log(oGenderInputs[0].value);
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="Div1">
            <p id="Paragraph">Hello</p>
            World
        </div>
        <div>
            <ul id="List1" class="list">
                <li id = "11"> Html </li>
                <li> Javascript </li>
                <li> CSS </li>
                <li> Webpack </li>
            </ul>
            <input id="insertInput" type="text"></input>
            <button onclick="insertChildClone()">插入列表元素顶部</button>
            <button onclick="removeTop()">删除顶部元素</button>
        </div>
        <div>
            <ul id="List2" class="list">
                <li> Vue </li>
                <li> React </li>
                <li> Angular </li>
            </ul>
            <input id="appendInput" type="text"></input>
            <button onclick="appendChild()">添加到列表元素的尾部</button>
            <button onclick="removeButton()">删除尾部元素</button>
        </div>
        <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>