为什么要将getElementById()的结果存储到一个变量中，而不是每次都使用该函数呢?

Why store the result of getElementById() to a variable instead of using the function everytime?

本文关键字：函数 变量 结果 getElementById 存储 为什么 一个      更新时间：2023-09-26

考虑以下代码:

function changeImage()
{
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon"))
    {
        image.src = "pic_bulboff.gif";
    }
    else
    {
        image.src = "pic_bulbon.gif";
    }
}

我不明白为什么这将getElementById()的结果存储到一个变量中，然后在if语句中使用，因为我们可以通过每次简单地使用getElementById()来访问属性src，像这样:

function changeImage()
{
    if(document.getElementById("myImage").src=="pic_bulboff.gif")
    {
       document.getElementById("myImage").src="pic_bulbon.gif";
    }
    else
    {
        document.getElementById("myImage").src="pic_bulboff.gif";
    }
}

为什么使用一个变量而不是重复使用getElementById() ?

var image = document.getElementById('myImage');通过引用返回一个对象，并为相同的图像节省了2次额外的"搜索"，这更慢，消耗更多的处理器资源，因为它将在第二个示例中。

更合适的做法是:

    <script>
    function changeImage()  {
        var image = document.getElementById('myImage');
        if (image) { image.src = image.src.match("bulbon")?"pic_bulboff.gif":"pic_bulbon.gif"; }
    }  
</script>
相关文章：