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;
          //为父元素添加样式
          oParent.style.color = "white";  
         oParent.style.backgroundColor ="lightskyblue";
      }
  }

var oUI = document.getElementById("list");
var oChildNodes = oUI.childNodes;
var oChildElements = oUI.children;

console.log("There are"+oChildNodes.length + "child nodes in list.");
console.log("There are"+ oChildElements.length + "child element nodes in list");

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

oBtn.onclick = function(){
    //删除最后的字节点
    //oUI。removeChild(oUI.lastChild);

    //删除最后的元素节点
    //if（oUI.lastChild.nodeType == 3){
    //    oUI.removeChild(oUI.latChild);
    //    oUI.removeChild(oUI.lastChild);
    //}
    //else{
    //  oUI.removeChild(oUI.lastChild);
    //}

    //oUI.removeChild(oUI.lastChild);

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

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

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