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

Question

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")

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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