【滑稽】每日一记 DOM基础（二）

获取层次节点的常用属性：
1、.childNodes:获取元素的所有子节点，返回一个数组，包括元素节点、文本节点
2、.firstChild：获取元素的第一个子节点
3、.lastChild：获取元素的最后一个子节点
4、.ownerDocument：获取当前文档根节点，在HTML文档中为document节点
5、.parentNode:获取当前节点的父节点
6、.previousSibling：获取当前节点的前一个兄弟节点
7、.nextSibling：获取当前节点的后一个兄弟节点

注：上述属性均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应element属性，
例如：firstChild→firstElementChild

8、.attribute：获取当前元素节点的所有属性节点

创建和增加一个节点的方法：
1、.createElement("标签名") ：创建一个新节点，需配合setAttribute()方法设置节点的相关属性
2、.appendChild(节点名) ：在某元素的最后追加一个新节点
3、.insertBefore(新节点名，目标节点名) ：将新节点插入到目标节点之前
4、.cloneChild(true/false) ：克隆节点，需要克隆哪个就用哪个去调用克隆对象，
括号内传递参数为true或false，true表示为克隆当前节点及所有子节点，false表示只克隆当前节点，不克隆子节点

　　　　　<ul id="ul1">
            <li>第一</li>
            <li>第二</li>
            <li>第三</li>
            <li>第四</li>
        </ul>
        
        <ul id="ul2">
            <li>第一</li>
            <li>第二</li>
            <li>第三</li>
            <li>第四</li>
        </ul>
        
        <button onclick="appendImg()">在最后插入一个图片</button>
        <button onclick="insertImg()">在两个ul之间插入一个图片</button>
        <button onclick="copyUl()">copy一个ul2 </button> <br />

        　　function appendImg(){
                var img = document.createElement("img");   //创建一个图片节点
                img.setAttribute("src","../../img/HBuilder.png"); //给img节点设置属性
                document.body.appendChild(img); //将设置好的img节点追加到body最后
            }
            function insertImg(){
                var img = document.createElement("img");   
                img.setAttribute("src","../../img/HBuilder.png");
                var ul2 = document.getElementById("ul2");
                document.body.insertBefore(img,ul2);  //在两个ul之间插入图片
            }
            function copyUl(){
                var ul2 = document.getElementById("ul2");
                var ul2Clone = ul2.cloneNode(true);
                var btn = ul2.nextElementSibling;
                document.body.insertBefore(ul2Clone,btn);
//                console.log(ul2Clone);
            }
            
            

 

删除和替换节点的方法：
1、.removeChild() 从父容器中删除指定节点
2、.replaceChild() 用新节点替换指定节点，
　　如果新节点为页面中已有节点会将此节点删除后替换到指定节点

　　　　<ul id="ul1">
            <li>第一</li>
            <li>第二</li>
            <li>第三</li>
            <li>第四</li>
        </ul>
        
        <ul id="ul2">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
　　　　 <button onclick="delUl1()">删除ul1</button>
        <button onclick="repUl2()">ul1替换ul2</button>
        
        function delUl1(){
            var ul1 = document.getElementById("ul1");
            if (ul1) {
                document.body.removeChild(ul1);
            } else{
                alert("UL1已经被删除");
            }            
        }
        function repUl2(){
            var ul1 = document.getElementById("ul1");
            var ul2 = document.getElementById("ul2");
            document.body.replaceChild(ul1,ul2);
        }
        

table 表格对象：
rows[] 返回表格中的所有行的一个数组
insertRow(index) 在表格的第index+1行插入一个新行
deleteRow(index) 删除表格的第index+1行

表格的行对象：
cells 属性：返回当前行中的所有单元格的一个数组
rowIndex ：返回当前行在表格中索引顺序，从0开始
insertCell() ：在当前行的第index+1处插入一个单元格
deleteCell() ：删除当前行第index+1处的一个单元格

表格的单元格对象：
cellIndex ：返回单元格在该行的索引顺序，从0开始
innerHTML属性：返回或设置当前单元格中的HTML代码
align 属性：设置当前单元格的水平对齐方式
className ：设置单元格的class名称

 　　　　 <table id="t1">
            <tr>
                <th>书名</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>嘿嘿嘿</td>
                <td>111</td>
            </tr>
            <tr>
                <td>哈哈哈</td>
                <td>222</td>
            </tr>
            <tr>
                <td>呵呵呵</td>
                <td>333</td>
            </tr>
            <tr>
                <td>合计</td>
                <td></td>
            </tr>
        </table> <br />
        <button onclick="addRow()">增加一行</button>
        <button onclick="delRow()">删除最后一行</button>
        <button onclick="changeTitle()">修改标题样式</button>
        <button onclick="copyRow()">复制最后一行</button>
        <button onclick="sum()">合计</button>

　　　　 function addRow(){
            var table = document.getElementById("t1");
            var newRow = table.insertRow(table.rows.length-1); //在表格最后一个行之前增加一个新行
            var cell0 = newRow.insertCell(0);
            cell0.innerHTML = "hhh";
            var cell1 = newRow.insertCell(1);
            cell1.innerHTML = "555";
            
//          for (i=0;i<5;i++) {
//               var celli = newRow.insertCell(i);
//               celli.innerHTML = "hhh";
//          }
            sum();

        }
        function delRow(){
            var table = document.getElementById("t1");
            if (table.rows.length>2) {
                var delRow = table.deleteRow(table.rows.length-2);
            } else{
                alert("删没了");
            }
            sum();
        }
        function changeTitle(){
            var table = document.getElementById("t1");
            var color = prompt("输入颜色：");
            table.rows[0].style = "background-color:"+color;
        }
        function copyRow(){
            var table = document.getElementById("t1");
            var copyRow = table.rows[table.rows.length-2].cloneNode(true);
            var heji = table.rows[table.rows.length-1];
            
            if (table.rows.length>2) {
                table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji);
            //由于浏览器自动将表格的tr包裹在tbody中，所以tr实际并非table的子节点，故需取到tbody进行插入
            }else{
                alert("没有可复制的行");
            }
            sum();
        }
        
        function sum(){
            var table = document.getElementById("t1");
            var rows = table.rows;
            if (rows.length<=2) {
                alert("没有可计算的行");
                return;
            }
            var sum = 0;
            for (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) +"元";
        }