Как запросить элемент SVG и получить его заголовок? - PullRequest
Новая
       23

Как запросить элемент SVG и получить его заголовок?

0 голосов
/ 04 октября 2019

У меня есть следующая разметка, где элемент верхнего уровня содержит <svg> с заголовком «Значок проверки»: 

<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существует, и его название - «Значок галочки». Элемент svg не обязательно является первым дочерним элементом. Какой самый простой способ сделать это? Я уже выбрал родительский элемент с data-testid = "понедельник": 

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

1 Ответ

2 голосов
/ 04 октября 2019

С помощью 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);
...