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

问题描述

我在一些图表中使用 Chartist.js，我需要定位图表内的一些元素以生成一些与它们相关的元素。有没有办法在“chart1”中定位如此深嵌套的子元素。我需要使用“ct-series-a”、“ct-series-b”等类来定位“g”元素……但是由于页面上有多个图表，这些图表也包含具有这些类名的元素，我只需要定位包含在图表中且 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>

解决方法

这样的事情应该对您有所帮助。

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>