JS DOM基础

DOM树节点：
分为三大类，分别为元素节点、文本节点、属性节点
文本节点、属性节点为元素节点的子节点，通过getElement系列方法可以取到元素节点
所有节点属性命名使用驼峰法则

HTML代码：

        <button id="btn1" onclick="getById()">通过id修改</button>
        <button id="btn2" onclick="getByName()">通过class修改</button>
        <button id="btn3" onclick="getByTagName()">通过tagname修改</button>
        <button id="btn4" onclick="getByClassName()">通过name修改</button>
        
        <div id="div1" class="div1" name="div1">div文字</div> 
        
        <!--<div id="div1" class="div1" name="div1">div文字</div> 
        <div id="div1" class="div1" name="div1">div文字</div> 
        <div id="div1" class="div1" name="div1">div文字</div> -->
        

访问指定节点的方法：
document.getElementById(); //通过id获取唯一的节点,多个同名id只会取第一个

            var a=1;
            function getById(){
                if (a==1){
                    var div1Style = document.getElementById("div1");
                    div1Style.style.backgroundColor="royalblue"; //修改属性节点
                    
                    var div1 = document.getElementById("div1");
                    div1.innerHTML="哈哈哈"; //重置修改div中的HTML代码
                    a=2;
                }else if(a==2){
                    var div1Style = document.getElementById("div1");
                    div1Style.style.backgroundColor="red"; //修改属性节点
                    a=1;
                }
                
            }

document.getElementsByClassName(); //通过ClassName取到一个数组，包含1到多个（元素）节点
　　使用方式:通过循环，取到每一个节点，循环次数：从0开始，到数组.length-1

  function getByClassName(){
                var div1Style = document.getElementsByClassName("div1");
                div1Style[0].style.backgroundColor="royalblue"; //修改属性节点
                
                var div1 = document.getElementsByClassName("div1");
                div1[0].innerHTML="哈哈哈"; //重置修改div中的HTML代码
                console.log(div1);

            }

document.getElementsByName(); // 通过name取到一个数组，包含1到多个（元素）节点

  function getByName(){
                var div1Style = document.getElementsByName("div1");
                div1Style[0].style.backgroundColor="royalblue"; //修改属性节点
                
                var div1 = document.getElementsByName("div1");
                div1[0].innerHTML="哈哈哈"; //重置修改div中的HTML代码
                console.log(div1);
                
//                var a=document.getElementsByName("div1").length;
//                for (i=0;i<a;i++) {
//                    var div1Style = document.getElementsByName("div1");
//                    div1Style[i].style.backgroundColor="royalblue"; 
//                }
                
            }

document.getElementsByTagName(); // 通过Tagname取到一个数组，包含1到多个（元素）节点

 function getByTagName(){
                var div1Style = document.getElementsByTagName("div");
                div1Style[0].style.backgroundColor="royalblue"; //修改属性节点
                
                var div1 = document.getElementsByTagName("div");
                div1[0].innerHTML="哈哈哈"; //重置修改div中的HTML代码
                console.log(div1);
                
            }

除了getElementById，其他三个都是elements（即复数形式）：getElementsByClassName、getElementsByName、getElementsByTagName，取到的是一个数组，包含多个元素；使用方式:通过循环，取到每一个节点，循环次数：从0开始，到数组.length-1（循环遍历）；例：

<input type="checkbox" name="input" value="苹果"/><span onclick="func0(0)">苹果</span>
<input type="checkbox" name="input" value="菠萝" /><span onclick="func0(1)">菠萝</span>
<input type="checkbox" name="input" value="香蕉" /><span onclick="func0(2)">香蕉</span>
<input type="checkbox" name="input" value="西瓜" /><span onclick="func0(3)">西瓜</span>
<button id="btna" onclick="checkbox()">选中的水果</button>

function checkbox(){
         var input = document.getElementsByName("input");
         var choose="";
         for (i=0;i<input.length;i++) {
         　　if (input[i].checked==true) {
         　　　　choose+=input[i].value+" ";
         　　}
         }
         if (choose=="") {
         　　 alert("未选择");
             return;
         }
            alert(choose);
}

JS修改样式总结：
1、classname:为元素设置一个新的class名字

div1.className="div2";

2、.style：为元素设置一个新的样式，注意驼峰命名法

div1Style.style.backgroundColor="royalblue";

3、.style(.cssText) ：为元素同时修改多个样式

 div1.style..cssText="200px; height:200px; ";

以上都是修改行内样式表，获取到的也是行内样式表

document.styleSheets[0].rules[0].style.cssText=""  //获取样式表中的样式

通过修改classname修改元素的样式:（最常用）

function getByClassName(){
　　　　var div1Style = document.getElementsByClassName("div1");
       div1[0].className="div2";
}
       <button id="btn1" onclick="getById()">通过id修改</button>
　　　　<div id="div1" class="div1" name="div1">div文字</div> 

　　　　.div1{
　　　　 100px;
　　　　height: 100px;
　　　　background-color: red;
　　　　}
　　　　.div2{
　　　　 200px;
　　　　height: 200px;
　　　　background-color: yellowgreen;
　　　　}

getAttribute() 方法：
document.getElementsByTagName("a")[0].getAttribute("target");
setAttribute() 方法：两个值：属性名称，属性值
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

　　　　 function getAttr(){
         　　var img1= document.getElementById("img1");
         　　alert(img1.getAttribute("src"));
        }
        function setAttr(){
        　　var img1= document.getElementById("img1");
        　　img1.setAttribute("src","../../img/mask_text_bg.png");
        　　img1.setAttribute("title","通过setAttribute设置了title");
       　　 img1.setAttribute("style"," 100px; height: 100px;");
        }
            
　　　　<button id="btn5" onclick="getAttr()">通过getAttr</button>
       <button id="btn6" onclick="setAttr()">通过name修改</button>
        
　　　　<img src="../../img/HBuilder.png" id="img1" />

查看元素节点：
tagName属性：获取节点的标签名
innerHTML:设置或者获取节点内部的所有HTML代码
innerText：设置或者获取节点内部的所有文字

获取层次节点的常用属性：
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) +"元";
        }