【滑稽】每日一记 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="width:200px; height:200px; background-color:blue;";

通过修改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{
　　　　width: 100px;
　　　　height: 100px;
　　　　background-color: red;
　　　　}
　　　　.div2{
　　　　width: 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","width: 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：设置或者获取节点内部的所有文字