时间戳

首页 > 解决方案 > 比 getElementById 更好的将元素放入 JS 的方法？

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

问题描述

我有很多非常相似的 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>

标签： javascripthtml

解决方案

在您的示例中使用querySelectorAll属性选择器：

//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>

推荐阅读