Question

我有很多非常相似的HTML元素需要导入到我的JavaScript文件中，但是通常的方法看起来很单调，而且太麻烦了，任何人都知道一种使用单个命令导入这些元素的方法，甚至有可能吗？

我需要香草JS解决方案。导入是指document.getElementById("example");并将其附加到变量中。

        <div id="graph-points-x">
            <div id="p0">0</div>
            <div id="x1">1</div>
            <div id="x2">2</div>
            <div id="x3">3</div>
            <div id="x4">4</div>
            <div id="x5">5</div>
            <div id="x6">6</div>
            <div id="x7">7</div>
            <div id="x8">8</div>
            <div id="x9">9</div>
        </div>
        <div id="graph-points-y">
            <div id="y1">1</div>
            <div id="y2">2</div>
            <div id="y3">3</div>
            <div id="y4">4</div>
            <div id="y5">5</div>
            <div id="y6">6</div>
            <div id="y7">7</div>
            <div id="y8">8</div>
            <div id="y9">9</div>
        </div>

Answer 1

在您的示例中，将querySelectorAll与attribute selector结合使用：

//Get elements with an id that starts with graph-points-
let graphPoints = document.querySelectorAll('[id^=graph-points-]');
console.log(graphPoints);

<div id="graph-points-x">
  <div id="p0">0</div>
  <div id="x1">1</div>
  <div id="x2">2</div>
  <div id="x3">3</div>
  <div id="x4">4</div>
  <div id="x5">5</div>
  <div id="x6">6</div>
  <div id="x7">7</div>
  <div id="x8">8</div>
  <div id="x9">9</div>
</div>
<div id="graph-points-y">
  <div id="y1">1</div>
  <div id="y2">2</div>
  <div id="y3">3</div>
  <div id="y4">4</div>
  <div id="y5">5</div>
  <div id="y6">6</div>
  <div id="y7">7</div>
  <div id="y8">8</div>
  <div id="y9">9</div>
</div>

Answer 2

如果您不需要定位IE7及更低版本，则document.querySelectorAll('[id^="graph-points"]')是您想要的。

我仍然建议向父容器中添加一个类，以便您可以使用更简单的选择器，因为以特定字符串开头的定位ID并不是最佳解决方案。

有关更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

比getElementById更好的将元素放入JS的方法？

2 个答案: