console 命令行工具 X clear

console

window.onload = function () {
    //找到所有的（单元格）td元素(父)
    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";//背景颜色
        }//另一种写法时加css
    }
    //找子元素 子元素和子节点
    var oUl = document.getElementById("list");//先找ul
    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) {//==3就是文本节点
            oUl.removeChild(oUl.lastChild);
            oUl.removeChild(oUl.lastChild);
        }
        else {
            oUl.removeChild(oUl.lastChild);
        }
        //另一个方法：只删除文本节点
        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;
}