使用DOM移除table的hidden属性时提示removeAttribute不是函数

点击按钮显示页面中的table时，尝试通过DOM的removeAttribute方法移除其hidden属性，出现如下报错：

handler.js:18 Uncaught TypeError: maintable.removeAttribute is not a function

改用getElementsByClass方法后，仍出现相同错误。

错误原因 #

document.getElementsByTagName()和document.getElementsByClassName()返回的是HTMLCollection（类数组对象），不是单个DOM元素。而removeAttribute是单个DOM元素的专属方法，直接在类数组对象上调用必然报错。

解决方案 #

方法1：从集合中取出目标元素 #

页面中只有一个目标table，直接取集合的第一个元素（索引为0）即可：

// 按标签名获取并取第一个元素
let maintable = document.getElementsByTagName("table")[0];

// 或者按类名获取并取第一个元素
let maintable = document.getElementsByClassName("table mt-3")[0];

方法2：使用querySelector直接获取单个元素 #

querySelector会返回匹配选择器的第一个元素，写法更简洁：

// 按标签名匹配
let maintable = document.querySelector("table");

// 按类名匹配（多个类名用点连接）
let maintable = document.querySelector(".table.mt-3");

方法3：直接修改hidden属性 #

除了移除属性，也可以直接将元素的hidden属性设为false，达到同样的显示效果：

maintable.hidden = false;

修改后的完整handler.js代码 #

"use strict";

btnDecrementar.onclick= decrementar;
btnIncrementar.addEventListener('click',contaclicks);
btnDecrementar.addEventListener('click',contaclicks);
// 修正元素获取方式
let maintable = document.getElementsByTagName("table")[0];
function incrementar(){
    let valor = Number(pcontador.innerText);
    valor=valor+1;
    pcontador.innerText = valor;
}
function decrementar(){
    let valor = Number(pcontador.innerText)
    valor=valor-1;
    pcontador.innerText = valor;
    
    maintable.removeAttribute('hidden');
    // 也可以替换成：maintable.hidden = false;
}

function contaclicks(){
    let valor = Number(clickcontador.innerText)
    valor=valor+1;
    clickcontador.innerText = valor;
}
titleInput.addEventListener('keyup',bten);
function bten(){
    var x = document.getElementById("titleInput");
    x.value = x.value.toUpperCase();
}

内容的提问来源于stack exchange，提问作者Diego Guart