在 getElementByID 中使用特殊字符答案

【问题标题】：Use special characters into getElementByID在 getElementByID 中使用特殊字符
【发布时间】：2022-12-01 01:55:19
【问题描述】：

我有一个 javascript 函数，我想用 getElementByID 提取数据，但每次它运行时我都需要提取另一个数据，我该怎么做。每次都需要拉列表的另一个元素

     dotlist = [dot1,dot2,dot3]
     document.getElementById("dot1").style.backgroundColor = "#ad6e1b";

当函数运行时，它应该是 dot2，然后是 3，然后又是 1

我试试这个

    var i = 0;

    function(){
    if(i<=3)
    document.getelementbyID("dot"+i);
    i++
    else{
    i=0;
    document.getelementbyID("dot1")
    }
    }

但没有工作。

【问题讨论】：

该方法是 getElementById - 注意您的拼写/语法。
您的控制台中可能出现错误，表明 getElementByID 不是函数。
不太确定“每次拉列表的另一个元素”是什么意思。如果所有元素都已经具有 dot1、dot2、dot3 等 ID，那么您似乎走在了正确的轨道上。另一方面，您可能希望找到特定父元素的所有子元素，然后遍历该集合或使用大量查询中的任何一个来选择您要遍历的整个元素集，可能是按类或某些除 id 之外的其他语义。您应该充分利用 DOM 的层次结构。
也“不工作”是绝不对您尝试做某事时出现的问题的足够详细的描述。请列出您的预期结果与实际结果，以及您遇到的任何实际错误消息，希望以完整但最少的方式为我们自己重现问题。

标签： javascript function

【解决方案1】：

有很多方法可以做到这一点，这里有几个想法：

// Idea 1
const dotList = ["dot1", "dot2", "dot3"];

dotList.forEach((dotId) => {
  const el = document.getElementById(dotId);
  console.log('idea 1', el);
})

// Idea 2

const dotListTwo = document.querySelectorAll('.dot');
dotListTwo.forEach((dot) => {
  console.log('idea 2', dot);
})

<div id="dot1" class="dot">Dot 1</div>
<div id="dot2" class="dot">Dot 1</div>
<div id="dot3" class="dot">Dot 1</div>

【讨论】：