javascript - How to query an SVG element and get its title? - Stack Overflow

admin管理员组

文章数量:1391960

I have the following markup where the top-level element contains an <svg> with the title "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>

For my unit test, I need to make sure that the svg element exists and its title is "Check Icon". The svg element is not necessarily the first child. What's the easiest way to do this? I have already selected the parent element with data-testid="monday":

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

I have the following markup where the top-level element contains an <svg> with the title "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>

For my unit test, I need to make sure that the svg element exists and its title is "Check Icon". The svg element is not necessarily the first child. What's the easiest way to do this? I have already selected the parent element with data-testid="monday":

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

• javascript
• dom
• svg
• selectors-api

Share Improve this question Follow asked Oct 4, 2019 at 15:01 NareshNaresh 25.9k3535 gold badges146146 silver badges213213 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

With querySelector you can ask for the contained tags as well using the CSS selector syntax:

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);

本文标签： javascriptHow to query an SVG element and get its titleStack Overflow