Question

我想了解我是否可以使用const关键字（ES6）将HTMLCollection视为constand，或者使用var关键字将其视为变量。

让我变得更加困惑的是，const按钮在for循环中正在发生变化，但是在类似数组的对象上进行访问。

(function IIFE() {
    'use strict';
    
    
    
    const buttons = document.getElementsByTagName('button');
    
    for (let i = 0, l = buttons.length; i < l; i += 1) {
        buttons[i].onclick = function () {
            
            for (let i = 0; i < l; i += 1) {
                
                buttons[i].className = '';
                
                this.className = 'active';
            }
            
        };
    }
    
    
    
    console.log(typeof(buttons)); // object
    console.log(buttons);         // HTMLCollection
    
    
}());

ul {
    list-style-type: none;
    width: 196px;
    padding: 10px 20px;
    margin-left: auto;
    margin-right: auto;
}

li {
    display: inline-block;
}

button {
    font-size: 34px;
    font-weight: 900;
    font-family: , "andale mono";
    border-radius: 4px;
    margin-right: 20px;
}



.active {
    background: rgba(51, 181, 229, 0.4);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test UI</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>

    <ul>
        <li><button class="active">A</button></li>
        <li><button>B</button></li>
        <li><button>C</button></li>
    </ul>
                                 
<script src="script.js"></script>
</body>
</html>

Answer 1

让我变得更加困惑的是，const按钮是这样的在for-loop中进行更改，但是可以通过类似数组访问对象

仅

const关键字会阻止您更改变量的值（原语或引用）。 您仍然可以修改变量的属性。

所以不能执行以下操作

const buttons = document.getElementsByTagName('button');
buttons = document.getElementsByTagName('button');//this line will throw an error with or without const again

但可以执行以下操作

const buttons = document.getElementsByTagName('button');
buttons[0].className = ''; //only property is being modified not the object reference value itself

使用ES6，DOM HTMLCollection - array-like-Element是常量吗？

1 个答案: