javascript - x = document.getElementById ("id").className = & x = document.getElementById ("id"), x.className = 之间的区别

Question

以下代码有什么区别:

<div class="w3-dropdown-click">
    <button class="w3-btn" onclick="clickDrp()">Hover Over me</button>
    <div class="w3-dropdown-content w3-animate-zoom w3-bar-block" id="cont">        
        <a href="#" class="w3-bar-item w3-button">SomeLink1</a>
        <a href="#" class="w3-bar-item w3-button">SomeLink2</a>
        <a href="#" class="w3-bar-item w3-button">SomeLink3</a>
        <a href="#" class="w3-bar-item w3-button">SomeLink4</a>
    </div>
</div>
<script type="text/javascript">
    function clickDrp(){
        var x = document.getElementById("cont").className;
        if(x.search("w3-show") == -1)
            x += " w3-show";
        else
            x = x.replace(" w3-show","");
    }
</script>

和

<div class="w3-dropdown-click">
    <button class="w3-btn" onclick="clickDrp()">Hover Over me</button>
    <div class="w3-dropdown-content w3-animate-zoom w3-bar-block" id="cont">        
        <a href="#" class="w3-bar-item w3-button">SomeLink1</a>
        <a href="#" class="w3-bar-item w3-button">SomeLink2</a>
        <a href="#" class="w3-bar-item w3-button">SomeLink3</a>
        <a href="#" class="w3-bar-item w3-button">SomeLink4</a>
    </div>
</div>
<script type="text/javascript">
    function clickDrp(){
        var x = document.getElementById("cont");
        if(x.className.search("w3-show") == -1)
            x.className += " w3-show";
        else
            x.className = x.className.replace(" w3-show","");
    }
</script>

在第二个下拉菜单中工作正常。首先，即使将 x 设为全局变量，它也不会。

我是 Javascript 的新手，我无法找出原因。有人可以推理出来吗？

PS:我用过w3-css

Answer 1

在第一个变体中，您的变量 x 是 className 字符串的副本。您对 x 所做的任何更改都将针对该变量，而不是原始的 className 属性值。

在第二个变体中，您的变量 x 是 getElementById 返回的对象引用的副本。只要你不给x赋新值，它就会指向DOM对象。对 x 进行的任何突变(即通过分配给它的一个属性，如 className)都会影响 DOM 对象，因此效果会在网络文档中可见。