使用含属性的数组变量操作DOM失效，代码存在哪些问题？

咱们来拆解这段代码里的几个核心问题，一步步解决：

1. 数组元素未加引号，触发变量未定义错误 #

你定义的attribArr数组里写的innerHTML和href没有加引号，在JS里会被当成变量名解析，但你根本没声明过这两个变量，运行时直接就会抛出ReferenceError，这是第一个致命问题。正确写法要把它们作为字符串放进数组：

var attribArr = ['innerHTML', 'href'];

2. 循环索引和DOM元素ID不匹配 #

你的循环i从0开始，生成的第一个ID是link_0，但你的HTML里只有link_1到link_5，第一次循环就会找不到元素，抛出Cannot set properties of null的错误。得让i从1开始，到5结束：

for(let i = 1; i <= 5; i++){

3. 动态属性访问方式错误 #

用document.getElementById(linkID).attribToReplace这种点语法时，JS会把attribToReplace当成固定的属性名来找，而不是你变量里存的innerHTML或href。要访问动态命名的属性，必须用方括号语法：

document.getElementById(linkID)[attribToReplace] = 'link_'+i;

4. 循环变量未声明，造成全局污染 #

你的i和j没加var/let/const声明，会自动变成全局变量，在复杂场景下很容易引发变量冲突。建议用let声明块级作用域的循环变量。

修正后的完整代码 #

<body>
  <a id="link_1" href="">Link 1</a>
  <a id="link_2" href="">Link 2</a>
  <a id="link_3" href="">Link 3</a>
  <a id="link_4" href="">Link 4</a>
  <a id="link_5" href="">Link 5</a>
  <script>
    var attribArr = ['innerHTML', 'href'];
    for(let i = 1; i <= 5; i++){
      for(let j = 0; j < attribArr.length; j++){
        var linkID = 'link_'+i;
        var attribToReplace = attribArr[j];
        document.getElementById(linkID)[attribToReplace] = 'link_'+i;
      }
    }
  </script>
</body>

修改后代码就能正常运行了，每个链接的文本和href都会被设置为对应的link_1到link_5。

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