console 命令行工具 X clear

console

window.onload=function(){
//找到父元素
var oTd = document.getElementsByTagName("td");
//遍历每一个td元素
for (var i = 0; i < oTd.length; i++) 
{
//为每一个td元素添加点击事件
oTd[i].onclick = function () 
{
//获得当前td的父元素（即tr）
var oParent = this.parentNode;
//为当前td的父元素添加样式
oParent.style.color = "white";
oParent.style.backgroundColor = "red";
};
}

//找子元素和子节点
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");
var oUl = document.getElementById("list");
oBtn.onclick = function () 
{
if (oUl.lastChild.nodeType == 3) {
oUl.removeChild(oUl.lastChild);
oUl.removeChild(oUl.lastChild);
} else {
oUl.removeChild(oUl.lastChild);
}
}


//获取子元素节点
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function () 
{
oUl.removeChild(oUl.lastElementChild);
}

//查找兄弟元素
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function () 
{
var preElement = oUl.children[2].previousElementSibling;
oUl.removeChild(preElement);
};
}

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