如何遍历SVG元素数组并获取每个SVG的title属性值？

你遇到的问题核心是：iconsArray里的元素是虚拟DOM对象，而非真实的DOM节点，所以querySelector、getElementsByTagName这类真实DOM专属的API自然无法生效。想要获取title内容，得直接操作虚拟DOM的属性结构。

方案1：直接遍历$children数组查找title #

根据你提供的虚拟DOM结构，子元素都存在$children属性中，直接遍历这个数组找到$tag$为title的对象即可：

// 获取单个SVG的title
const firstIcon = iconsArray[0];
const titleElement = firstIcon.$children.find(child => child.$tag$ === 'title');
const titleText = titleElement?.$text$; // 结果为 "c info 24"

// 遍历整个数组，批量获取所有title
const allTitles = iconsArray.map(icon => {
  const titleEl = icon.$children.find(child => child.$tag$ === 'title');
  return titleEl ? titleEl.$text$ : null;
});
// allTitles 结果为 ["c info 24"]

方案2：递归查找（适配嵌套层级的情况） #

如果title可能嵌套在更深的虚拟DOM层级里，可通过递归函数遍历所有子节点：

function getTitleFromVDOM(vdom) {
  if (!vdom.$children) return null;
  
  // 先检查当前层级的子元素
  const titleEl = vdom.$children.find(child => child.$tag$ === 'title');
  if (titleEl) {
    return titleEl.$text$;
  }
  
  // 递归遍历子元素的子节点
  for (const child of vdom.$children) {
    const result = getTitleFromVDOM(child);
    if (result) return result;
  }
  
  return null;
}

// 单个元素使用
const singleTitle = getTitleFromVDOM(iconsArray[0]);

// 批量处理数组
const allTitles = iconsArray.map(icon => getTitleFromVDOM(icon));

注意事项 #

• 虚拟DOM的属性命名（如$tag$、$children$、$text$）可能因使用的框架（如Preact、Vue）略有差异，需根据你实际的虚拟DOM结构调整属性名。
• 使用可选链?.或条件判断，可避免因找不到title元素而抛出报错。

内容的提问来源于stack exchange，提问作者happy_story