如何查询 SVG 元素并获取其标题？

Question

我有以下标记，其中 top-level 元素包含一个 <svg>，标题为 "Check Icon":

<div data-testid="monday" role="button">
  <svg viewBox="0 0 24 24">
    <title>Check Icon</title>
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
  </svg>
  <span>Monday</span>
</div>

对于我的单元测试，我需要确保 svg 元素存在并且它的标题是 "Check Icon"。 svg 元素不一定是第一个 child。最简单的方法是什么？我已经用 data-testid="monday":

选择了 parent 元素

const buttonElement = document.querySelector('[data-testid="monday"]'));

Answer 1

使用 querySelector，您也可以使用 CSS 选择器语法请求包含的标签：

var buttonElement = document.querySelector('[data-testid="monday"]');

// select the title element in the svg element as direct child nodes,
// if you need to be so specific:
// var titleElement1 = document.querySelector('[data-testid="monday"] > svg > title');

// or just select any title in the test object: 
var titleElement = document.querySelector('[data-testid="monday"] title');

// get the text of the title by:
alert (titleElement.textContent);

如何查询 SVG 元素并获取其标题？

How to query an SVG element and get its title?

javascript

dom

svg

selectors-api