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=this.parentNode;
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);
//}
//oUl.removeChild(oUl.lastElementChild);
//oUl.removeChild(oUl.firstElementChild);
oUl.removeChild(oUl.firstChild);

//删除兄弟元素节点
var oCSS=oUl.children[1];
//oUl.removeChild(oCSS.previousElementSibling);
//oUl.removeChild(oCSS.nextElementSibling);

//删除兄弟节点
//oUl.removeChild(oCSS.previousSibling);
//oUl.removeChild(oCSS.nextSibling);
}

}

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