console 命令行工具 X clear

console

window.onload = function () 
{
    //Byid只能获取某一个，tagname获取一个数组
    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 oCildNodes=oUl.childNodes;
    var oChildElemts=oUl.children;

    console.log('There are '+oCildNodes.length+' childNodes in list');
    console.log('There are '+oChildElemts.length+' childNodes in list');

    var oBtn=document.getElementById('btn');
    oBtn.onclick=function(){
        //1、删除最后的子节点
        oUl.removeChild(oUl.lastChild);

        //2、删除最后的元素节点
        // if(oUl.lastChild.nodeType==3){
        //     oUl.removeChild(oUl.lastChild);
        //     oUl.removeChild(oUl.lastChild);
        // }
        // else{
        //     oul.removeChild(oUl.lastChild);
        // }

        //3、删除最后的元素节点
       // oUl.removeChild(oUl.lastElementChild);




            // //删除兄弟节点
            // var preLastElement=oUl.lastElementChild.previousElementSibling;
            // oUl.removeChild(preLastElement);



            //删除兄弟节点
            var preLastNode=oUl.lastElementChild.previousSibling;
            oUl.removeChild(preLastNode);

            //childNodes包括所有子节点：元素节点、文本节点
            //children:只包括元素节点
            //空字符数量等于标签的间隔数 
    }


    
}

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