熟悉JS中的常用选择器及属性、方法的调用

选择器、属性及方法调用的配合使用：

<style>
            #a{
                width: 200px;
                height: 100px;
                background-color: red;
               
            }
            .b{
                width: 200px;
                height: 100px;
                background-color: green;
               
            }
            .div1{
                width: 200px;
                height: 100px;
                background-color:aqua;
            }
        </style>

    <body>
        <div id="a"></div>
        <div class="b" style="background-color: black;"></div>
        <div class="b" style="background-color: chartreuse;"></div>
        <div class="div1">精英教育</div>
        <input type="text" name="ipt1" />
        <input type="checkbox" name="ckb2" / disabled="disabled">
    </body>
   
    <script>
        //先选择元素在进行加效果
        //ID选择器(使用较高JS)
        var a = document.getElementById("a");
        //检测类型
        alert(typeof(document.getElementById("a")))
       
        a.style.backgroundColor="royalblue";
       
        a.innerHTML ="<span>hello<span>";
        a.innerText = "<span>hello<span>";
//        class选择器
        var b_class = document.getElementsByClassName("b");
        b_class[0].style.backgroundColor="red";
       
        var b_class = document.getElementsByClassName("b");
        b_class[1].style.backgroundColor="blueviolet";
//        标签选择器
        var b_b = document.getElementsByTagName("div");
        b_b[1].style.backgroundColor="yellow";
       
        var div_1 = document.getElementsByName("ipt1");
        div_1[0].value="文本框";
       
        var ckb2 = document.getElementsByName("ckb2")[0];
        ckb2.setAttribute("checked","");
    //移除属性
        ckb2.removeAttribute("disabled")
       
    //创造元素
     var a = document.createElement("a");
     a.setAttribute("href","http://www.baidu.com");
     a.innerText="百度一下";
     
     document.body.appendChild(a);
     document.body.removeChild(a);
     
    div1.appendChild(a);
   
       
    </script>

<body>
        <!--DOM   Document Object Model
        BOM   Bowers O M-->
        <div id="div1" class="div1"></div>
        <div class="div1"></div>
        <input type="text" name="ipt1" />
        <input type="checkbox" name="ckb1" disabled="disabled"/>
    </body>
</html>
<script>
//    alert('1111');
//    window.alert('123')
    var div1 = document.getElementById('div1');
    div1.style.backgroundColor = 'red';
//    div1.innerHTML = "<ul><li>123456</li></ul>";
    div1.innerText = "<ul><li>123456</li></ul>";
    
    
    var div1_class = document.getElementsByClassName('div1');
    div1_class[1].style.backgroundColor = "green";
    
    var div1_1 = document.getElementsByTagName('div');
    div1_1[1].style.backgroundColor = "blue";
    
//    jQuery
    var div1_2 = document.getElementsByName('ipt1');
    div1_2[0].value = '123';
    
    var ckb1 = document.getElementsByName('ckb1')[0];
//    ckb1.setAttribute("checked","checked");
    ckb1.removeAttribute('disabled');
    
    var a = document.createElement("a");
    a.setAttribute("href","http://www.baidu.com");
    a.innerText = "百度";
    
    document.body.appendChild(a);
    document.body.removeChild(a);
    
    div1.appendChild(a);
</script>