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 20: " + oChildElements.length);
    console.log ("line 21: " + 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);  //首个元素节点

        //删除兄弟元素节点
        //var oCSS =oUl.children[1]; //第二个元素节点
        //oUl.removeChild(oCSS.previousElementSibling);  //相同节点树层中的前一个元素节点
        //oUl.removeChild(oCSS.nextElementSibling);    //相同节点树层中的后一个元素节点

        //删除兄弟节点
        //var oCSS =oUl.children[1];
        //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;
}