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 = d;
        }
    }

    //找到子元素节点和字节点

    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.onclik = function(){
        oUl.removeChild(oUl.firstchild);
        //删除兄弟元素
        var oCSS = oUl.children[1];
    }

}

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

    // 给每一个td元素添加点击事件，遍历单元格
    for(var i = 0; i < oTds.length; ++i) {
        oTds[i].onclick = function () {
            //点击事件，调用函数来获取当前td的父元素tr
            var oParent = this.parentNode;
            //通过直接改style为父元素添加样式
            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);
        }
        //方法2：只删除文本节点
        oUl.removeChild(oUl.lastElementChild);
        oUl.removeChild(oUl.firstElementChild);

        //删除兄弟元素节点css前面HTML和后面的JavaScript
        var OCSS=oUl.children[1];
        oUl.removeChild(OCSS.previousElementSibling);//删除兄弟元素节点css前面HTML
        oUl.removeChild(OCSS.nextElementSibling);//删除兄弟元素节点css后面的JavaScript

        //删除兄弟节点
        oUl.removeChild(OCSS.previousSibling);//删除兄弟元素节点css前面HTML
        oUl.removeChild(OCSS.nextSibling);//删除兄弟元素节点css后面的JavaScript
    }

}

<!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;
}