首页 > 用getElementsByTagName和getElementById获取该元素的属性为什么效果不一样?

用getElementsByTagName和getElementById获取该元素的属性为什么效果不一样?

HTML代码

<h1>Amy</h1>
<ul>
    <li>
        <a href = "img/amy-1.jpg" onclick="showPic(this);return false;" title = "amy1"> amy1</a>
    </li>
    <li>
        <a href = "img/amy-2.jpg" onclick="showPic(this);return false;" title = "amy2"> amy2</a>
    </li>
    <li>
        <a href = "img/amy-3.jpg" onclick="showPic(this);return false;" title = "amy3"> amy3</a>
    </li>
    <li>
        <a href = "img/amy-4.jpg" onclick="showPic(this);return false;" title = "amy4"> amy4</a>
    </li>
    <img id="placeholder" src="img/test.jpg" alt="my image gallery" />
</ul>
<script type="text/javascript" src="scripts/shoWPic.js"></script>

js代码

     function showPic(whichpic){
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src",source);
     }

把js代码里第三行document.getElementById("placeholder")换成document.getElementsByTagName("img")

想换成getElementsByTagName获取那个img节点的话,应该改成document.getElementsByTagName("img")[0],因为getElementsByTagName("img")获取到的是img节点数组。


通过getElementById获得的是一个元素,而getElementsByTagName获得的是一个集合,比如getElementsByTagName("img")得到的是所有标签为img的数组集合。可以通过下标方法getElementsByTagName("img")[i]来获取每一个img


通过getElementsByTagName获取到的是个元素集合,你可以把它看成一个数组,然后通过下标的方式选择你需要的目标元素。不管元素有多少个,它都得通过下标的方式去选择。例如:document.body.getElementsByTagName("div")[0],这段代码它明确的告诉程序,要找的元素是body里面第一个div元素。


document.getElementsByTagName("img")返回的是document中标签名为img的合集,如果你想换需要写为document.getElementsByTagName("img")[0]

【热门文章】
【热门文章】