如何使用JavaScript遍历DOM树获取dc-chart类下指定子元素？

让我们一步步拆解并解决你的问题：

1. 修正HTMLCollection的索引语法 #

首先，document.getElementsByClassName("dc-chart")返回的是HTMLCollection（类数组对象），它的索引从0开始，而且访问元素时不能加.。你要找第7个元素，对应的索引应该是6，正确写法是：

const dcCharts = document.getElementsByClassName("dc-chart");
const targetChart = dcCharts[6]; // 第7个元素，索引从0开始

为了避免数组越界报错，建议先加个长度判断：

if (dcCharts.length >= 7) {
  const targetChart = dcCharts[6];
  // 后续查找操作
}

2. 正确查找目标rect元素 #

你用getElementById("stack _0")失败，主要有两个核心问题：

• getElementById是全局查找（基于整个文档），无法在指定元素的子节点范围内搜索；而且HTML的id不允许包含空格，stack _0是无效的id，大概率是你拼写失误（比如应该是stack_0）。
• 要在targetChart内部查找rect元素，得用局部上下文的查找方法，分几种情况处理：

情况1：目标rect的id是stack_0（修正空格后） #

在指定元素内查找id元素，用querySelector更可靠（getElementById不支持局部上下文）：

const targetRect = targetChart.querySelector('#stack_0');

情况2：目标rect的class包含stack和_0 #

如果是按类查找（你提到是"rect类元素"），写法如下：

// 查找同时拥有stack和_0类的rect元素
const targetRect = targetChart.querySelector('rect.stack._0');
// 或者获取所有rect后遍历筛选
const allRects = targetChart.querySelectorAll('rect');
allRects.forEach(rect => {
  if (rect.classList.contains('stack') && rect.classList.contains('_0')) {
    // 找到目标rect，执行操作
  }
});

情况3：目标是dc.js生成的第0个堆叠rect #

dc.js生成的堆叠图表元素通常会带有特定属性（比如data-stack-index），你也可以通过属性筛选：

const targetRect = targetChart.querySelector('rect[data-stack-index="0"]');

3. 调用元素的事件监听器 #

找到目标rect后，有两种方式触发它的事件：

• 模拟原生事件（推荐，符合浏览器事件机制）：

if (targetRect) {
  // 模拟点击事件，如需冒泡可加配置参数
  targetRect.dispatchEvent(new Event('click', { bubbles: true }));
  // 其他事件比如mouseover同理
}

• 直接调用事件处理函数（需能获取到对应函数）：

if (targetRect) {
  // 获取click事件的处理函数（Chrome控制台支持getEventListeners）
  const clickListeners = getEventListeners(targetRect).click;
  if (clickListeners.length > 0) {
    clickListeners[0].listener.call(targetRect); // 绑定元素上下文调用
  }
}

内容的提问来源于stack exchange，提问作者Mussé Redi