console 命令行工具 X clear

console

window.onload = function() {

    //找到父元素
    var oTds = document.getElementsByTagName("td");

    for(var i = 0; i < oTds.length; ++i) {
        oTds[i].onclick = function() {
            var oParent = this.parentNode;
            oParent.style.color = "white";
            oParent.style.backgroundColor="lightskyblue";
        }
    }
    
    // 找子元素节点和子节点

    var oUl = document.getElementById("list");
    var oChildElements = oUl.children;
    var oChildNodes = oUl.childNodes;
    console.log("line 19: " + oChildElements.length);
    console.log("line 20: " + oChildNodes.length);

    var oBtn = document.getElementById("btn");

    oBtn.onclick = function() {
        //删除最后一个子节点
        //oUl.removeChild(oUl.lastChild);

        //删除元素节点
        // if (oUl.lastChild.nodeType == 3) {
        //     oUl.removeChild(oUl.lastChild);
        //     oUl.removeChild(oUl.lastChild);
        // }
        // else {
        //     oUl.removeChild(oUl.lastChild);
        // }
        //oUl.removeChild(oUl.lastElementChild);
        //oUl.removeChild(oUl.firstElementChild);
        oUl.removeChild(oUl.firstChild);

        //删除兄弟元素节点
        var oCSS = oUl.children[1];
        // oUl.removeChild(oCSS.previousElementSibling);
        // oUl.removeChild(oCSS.nextElementSibling);

        //删除兄弟节点
        // oUl.removeChild(oCSS.previousSibling);
        // oUl.removeChild(oCSS.nextSibling);

    }


}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        
        </script>
    </head>
    <body>
        <table>
            <caption>考试成绩表</caption>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </table>

        <ul id="list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>Vue.js</li>
        </ul>
        <button id="btn">删除</button>
    </body>
</html>

table{
    border-collapse:collapse;
}
table,tr,td{
    border:1px solid gray;
}