<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function (){
/* [获取层次节点的常用属性]
*
* 1 .childNodes：(数组)获取元素的所有子节点
* 2 .firstChild：获取元素的第一个子节点；
* 3 .lastChild:获取元素的最后一个子节点；
* 4 .ownerDocument:获取当前文档根节点。在html文档中，为document节点
* 5 .parentNode:获取当前节点的父节点；
* 6 .previousSibling:获取当前节点的前一个兄弟节点
* 7 .nextSibling:获取当前节点的后一个兄弟节点
*
* 注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild--->firstElementChild
*
* 8 .attributes:获取当前元素节点的所有属性节点
*
*/
var ul1 = document.getElementById("ul1");
var lis = ul1.getElementsByTagName("li"); //获取UL里面的所有li
console.log(ul1.firstElementChild);
}
/* 【创建并新增节点】
*
* 1、.createElement("标签名"): 创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性；
* 2、 .appendChild(节点名): 在某元素的最后追加一个新节点
* 3、 .insertBefore(新节点名,目标节点名):将新节点，插入到目标节点之前
* 4、 克隆节点.cloneNode(true/false): 需要克隆谁，就用谁去调用克隆对象；
* >>>传递参数可以为true或false:
* ① true表示：克隆当前节点及所有子节点；
* ② false表示：只克隆当前节点，不可隆子节点(默认)
*
*
* 【删除/替换节点】
*
* 1、 .removeChild(需删除节点):从父容器中，删除指定节点；
* 2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点，会将此节点删除后，替换到指定节点。
*
*/
function appendImg(){
// 1. 创建一个图片节点
var img = document.createElement("img");
// 2. 给img节点设置属性
img.setAttribute("src","../../1_HTML基本标签/img/icon.png");
// 3. 将设置好的img节点，追加到body最后
document.body.appendChild(img);
}
function insertImg(){
// 1. 创建一个图片节点
var img = document.createElement("img");
// 2. 给img节点设置属性
img.setAttribute("src","../../1_HTML基本标签/img/icon.png");
var ul2 = document.getElementById("ul2");
// 3. 在两个ul之间插入图片
document.body.insertBefore(img,ul2);
}
var count = 2;
function copyUl(){
var ul2 = document.getElementById("ul2");
count++;
// 克隆ul2节点
var ul2Clone = ul2.cloneNode(true);
ul2Clone.setAttribute("id","ul"+count);
// 在原ul2节点之前，插入新克隆节点
document.body.insertBefore(ul2Clone,ul2);
}
function delUl1(){
// 取到ul1
var ul1 = document.getElementById("ul1");
if(ul1){
// 从ul1的父容器body中删除ul1节点
document.body.removeChild(ul1);
}else{
alert("别删了！ul1已经被干了！");
}
}
function ul1ReplaceUl2(){
var div = document.createElement("div");
div.setAttribute("style","width: 100%; height: 20px; ");
var ul2 = document.getElementById("ul2");
document.body.replaceChild(div,ul2);
}
</script>
<style type="text/css">
ul{
width: 600px;
list-style: none;
padding: 0px;
display: flex;
justify-content: space-around;
margin-top: 20px;
}
</style>
</head>
<body>
<ul id="ul1" class="ul1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<div style="width: 100%; height: 20px; " id="div1"></div>
<hr />
<ul id="ul2">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<button onclick="appendImg()">在最后插入一幅图片</button>
<button onclick="insertImg()">在两个ul之间插入一个图片</button>
<button onclick="copyUl()">copy一个ul2</button>
<button onclick="delUl1()">删除UL1</button>
<button onclick="ul1ReplaceUl2()">新建div替换ul2</button>
<br />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* [表格对象]
* 1、 rows属性： 返回表格中的所有行，数组；
* 2、 insertRow(index)： 在表格的第index+1行，插入一个新行
* 3、 deleteRow(index)： 删除表格的第index+1行。
*
* [表格的行对象]
* 1、 cells属性： 返回当前行中的所有单元格，数组；
* 2、 rowIndex属性： 返回当前行，在表格中的索引顺序，从0开始；
* 3、 insertCell(index)： 在当前行的第index+1处插入一个<td>
* 4、 deleteCell(index)： 删除当前行的第index+1个<td>
*
* [表格的单元格对象]
* 1、 cellIndex属性：返回单元格在改行的索引顺序，从0开始；
* 2、 innerHTML属性： 返回或设置当前单元格中的HTML代码；
* 3、 align属性： 设置当前单元格的水平对齐方式；
* 4、 className属性： 设置单元格的class名称；
*
*/
function newRow(){
var table = document.getElementById("table");
// 在表格的最后一行，插入一个新行
var newRow = table.insertRow(table.rows.length-1);
// 给新行设置单元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = "聂鹏飞";
var cell1 = newRow.insertCell(1);
cell1.innerHTML = "2.50元";
getSum();
}
function delRow(){
var table = document.getElementById("table");
if(table.rows.length>2){
table.deleteRow(table.rows.length-2);
}else{
alert("已经没了！删毛线啊！");
}
getSum();
}
function changeTitle(){
var color = prompt("请输入6位16进制颜色值：");
var table = document.getElementById("table");
table.rows[0].style = "
}
function copyRow(){
var table = document.getElementById("table");
var copyRow = table.rows[table.rows.length-2].cloneNode(true);
var heji = table.rows[table.rows.length-1];
// 由于浏览器，自动将表格的<tr>包裹在<tbody>中
// 所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入
if(table.rows.length>2){
table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji);
}else{
alert("没有可以复制的行");
}
getSum();
}
function getSum(){
var table = document.getElementById("table");
var rows = table.rows;
if(rows.length<=2){
alert("没有可计算的行！");
rows[rows.length-1].cells[1].innerHTML = 0+"元";
return;
}
var sum = 0;
for(var i=1;i<=rows.length-2;i++){
var cells = rows[i].cells;
sum += parseFloat(cells[cells.length-1].innerText);
}
rows[rows.length-1].cells[1].innerHTML = sum.toFixed(2)+"元";
}
window.onload = function(){
getSum();
}
</script>
<style type="text/css">
table{
border-collapse: collapse;
width: 400px;
}
td,th{
border: 1px solid #000000;
}
table tr:last-child{
color: red;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>30.00元</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td>18.50元</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>30.99元</td>
</tr>
<tr>
<td>合计</td>
<td></td>
</tr>
</table>
<br />
<button onclick="newRow()">增加一行</button>
<button onclick="delRow()">删除最后一行</button>
<button onclick="changeTitle()">修改标题样式</button>
<button onclick="copyRow()">复制最后一行</button>
<button onclick="getSum()">合计</button>
</body>
</html>
