获取元素

querySelector()方法

语法：document.querySelector(CSS selectors)

CSS选择器：类型String，指定一个或多个匹配元素的CSS元素，可以使用它们的id，类，类型，属性，属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。

接受一个参数，通过元素的css选择器查找元素。如果找到相应的元素则返回该元素的HTMLDivElement对象；如果不存在，则返回null。仅仅匹配指定选择器的第一个元素

    document.querySelector("#div1");//获取id为div1的元素

    document.querySelector(".div1");//获取class为div1的第一个子元素

querySelectorAll()方法

语法：document.querySelectorAll(CSS selectors)

接受一个参数，将返回一个对象数组，这个数组保存着所有符合选择器的节点列表。

    document.querySelectorAll("li");//获取所有li元素，返回数组

    docuemnt.querySelectorAll(".list li");//获取所有class为list元素下的所有li元素，返回数组

querySelector和getElement区别

querySelector获取的元素是静态的，通过其他方法增加或删除其获取的元素，其获取的元素对象不会发生变化

getElement获取的元素是动态的，通过其他方法增加或删除其获取的元素，其获取的元素对象会动态变化

className属性

语法：object.className=className

className属性设置或返回元素的class属性。

    <style>
        .divshow{
            width:200px;
            height:200px;
            background:aquamarine;
        }
    </style>
    <input type="button" id="activebtn" value="显示/隐藏" />
    <div id="divactive" class="divshow"></div>
    <script>
        var btn=document.querySelector("#activebtn");
        var div=document.querySelector("#divactive");

        btn.onclick=function(){
            if(div.className=="divshow"){
                div.className="";
            }else{
                div.className="divshow";
            }
        }
    </script>

this变量

永远指向其所在函数的所有者，如果没有所有者时指向window（窗口）

Tab切换

tab切换（选项卡切换），实现效果点击按钮，分别切换按钮对应的div

    <style>
        .divtab0{
            position:relative;
            width:200px;
            height:200px;
        }
        .divtab{        
            position:absolute;
            top:0;
            width:200px;
            height:200px;
            background-color:lime;
            font-size:50px;
            text-align:center;
            line-height:200px;
            display:none;
        }
        .tabbtncolor{
            background-color:aqua;
        }
    </style>
    <input type="button" class="tabbtn tabbtncolor" style="background-color:lime;" value="按钮一" 
    /><input type="button" class="tabbtn tabbtncolor" value="按钮二" 
    /><input type="button" class="tabbtn tabbtncolor" value="按钮三" />
    <div class="divtab0">
        <div class="divtab" style="display:block;">1</div>
        <div class="divtab">2</div>
        <div class="divtab">3</div>
    </div>
    <script>
        var inputs=document.querySelectorAll(".tabbtn");
        var divs=document.querySelectorAll(".divtab");
        for(var i=0;i<inputs.length;i++){
            inputs[i].index=i;
            inputs[i].onclick=function(){
                for(var j=0;j<inputs.length;j++){
                    inputs[j].style.backgroundColor="";
                    divs[j].style.display="none";
                }
                this.style.backgroundColor="lime";
                divs[this.index].style.display="block";
            }
        }
    </script>

    
    
    

        
1
        
2
        
3