DOM获取元素的一些方法

 getElementById("id名"); 

      根据id获取元素，返回一个元素对象

<a href="images/5.jpg" id="ak">
    <img src="images/5-small.jpg" alt="">
</a>
<img src="" alt="" id="imgs">

<script>
 function my$(id){
    return document.getElementById(id);
}
    my$("ak").onclick=function () {
        my$("imgs").src=this.href;
        return false;
    }
</script>

getElementsByTagName("标签名")； 

 根据标签名获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

<textarea name="" id="" cols="40" rows="10" readonly="readonly">
        注册用户的协议:

        某人问智者,
        大师:您觉得怎么做才是最快乐的?
        回答说:不要和愚者辩论
        这个人说:我不这么认为!
        大师说:您说的对,
</textarea>
<input type="button" value="注册" id="mybtn">

<script>
 function my$(id){
    return document.getElementById(id);
}
    my$("mybtn").onclick=function(){
        var textObjs=document.getElementsByTagName("textarea")[0];
        textObjs.readOnly=false;
    }
</script>

getElementsByName("name属性的值")

 根据name属性获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

<input type="button" value="显示效果" id="btn"><br>

<input type="text" value="不好"><br>
<input type="text" value="不好"><br>
<input type="text" value="你好吗" name="yy"><br>
<input type="text" value="你好吗" name="yy"><br>
<input type="text" value="不好"><br>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        var inputs = document.getElementsByName("yy");
         for(var i=0;i<inputs.length;i++){
             inputs[i].value="呵";
         }
    }

</script>

getElementsByClassName("类名")

根据class名获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

<input type="button" value="改变背景颜色" id="btn">

<span>span</span> <br>
<span class="x">span</span> <br>
<div class="x">div</div>
<div>div</div>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        var objs = document.getElementsByClassName("x");
        for(var i=0;i<objs.length;i++){
            objs[i].style.backgroundColor="lightblue";
        }
    }

</script>

querySelector("选择器的名字");

根据选择器获取元素，返回一个元素对象

<input type="button" value="改变最后一个div的背景颜色" id="btn"> <br>
<input type="button" value="改变背景颜色" id="btn1"> <br>
<script>
    my$("btn").onclick = function () {
        document.querySelector("#dv").style.backgroundColor = "pink";
    }
</script>

querySelectorAll("选择器的名字");

根据选择器获取元素，返回一个伪数组，数组里存的是多个DOM元素对象

<span>span</span> <br>
<span class="x">span</span> <br>
<div class="x">div</div>
<div>div</div>
<div id="dv">div</div>

<script src="common.js"></script>
<script>
    my$("btn1").onclick = function () {
        var objs = document.querySelectorAll(".x");
        for (var i = 0; i < objs.length; i++) {
            objs[i].style.backgroundColor = "lightblue";
        }
    }

</script>