个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 11:27:30 25 4
gpt4 key购买 nike

我想了解是否可以使用 const 关键字 (ES6) 将 HTMLCollection 视为常量，或者使用 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>

最佳答案

What´s making me getting confudes is the fact, that const buttons is changing in the for-loop, but beeing accessed over the array-like object.

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

关于javascript - DOM HTMLCollection - array-like-Element 是使用 ES6 的常量吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47434156/

25 4 0
文章推荐： ios - UITableView 仅选中行的复选标记
文章推荐： java - 组合两个 CharSequence 变量
文章推荐： ios - 返回按钮对应错误的导航 Controller
文章推荐： java - 是否有可能控制反序列化文件时创建的对象数量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com