使用 Javascript 定位 HTML 中的非直接子元素？

Question

我正在为一些图表使用 Chartist.js，我需要定位图表内的一些元素以生成一些与它们相关的元素。有没有一种方法可以针对“chart1”中如此深层嵌套的子元素。我需要使用“ct-series-a”、“ct-series-b”等 classes 定位“g”元素...但是由于页面上有多个图表也有具有这些 class 名称的元素，我只需要定位图表中包含的 ID 为“chart1”的元素。

HTML 模型

<div id="chart1" class="ct-chart">
<svg>
<g>
<g class="ct-series ct-series-a"></g>
<g class="ct-series ct-series-b"></g>
<g class="ct-series ct-series-c"></g>
</g>
</svg>
</div>

Answer 1

类似的内容应该对您有所帮助。

const chart1 = document.getElementById("chart1");
const seriesA = chart1.getElementsByClassName("ct-series-a")[0]
console.log(seriesA.className)
// I did use className , for reducing console data to show u the result in console .

<div id="chart1" class="ct-chart">
  <svg>
    <g>
      <g class="ct-series ct-series-a"></g>
      <g class="ct-series ct-series-b"></g>
      <g class="ct-series ct-series-c"></g>
    </g>
  </svg>
</div>

使用 Javascript 定位 HTML 中的非直接子元素？

Targeting elements that are not direct children in HTML using Javascript?

javascript

chartist.js