Как получить текстовое содержимое tspan?

У меня проблема с доступом к textContent тега tspan — JS выдает NULL результат при выполнении document.getElementsByTagName("g")[2].getElementsByTagName("tspan")[1].getAttribute("textContent")

Однако, если я это сделаю document.getElementsByTagName("g")[2].getElementsByTagName("tspan")[1]в DevConsole Chrome, я получу тег, а если «Показать на панели элементов» и проверю его свойства, они содержат textContent с ожидаемым результатом «зеленый».

Как я могу получить этот результат с помощью JS?

window.addEventListener("load", function() {
  tc = ">"+document.getElementsByTagName("g")[2].getElementsByTagName("tspan")[1].getAttribute("textContent")
  document.getElementById("output").textContent = tc
});

<p>
  textContent=
  <span id = "output">
  </span>
</p>    

<svg height = "320" width = "220">
  <g>
    <rect x = "20" y = "120" width = "79" height = "71" transform = "translate(20, 120) rotate(NaN) translate(-20, -120)" fill = "transparent"></rect><text alignment-baseline = "middle" dy = "0.7em" x = "20" y = "120" font-size = "11px" fill = "rgb(255, 0, 0)" font-style = "none" font-weight = "0" text-decoration = "none" transform = "translate(20, 120) rotate(NaN) translate(-20, -120)">
      <tspan x = "20" dy = "0.7em">RED</tspan>
      <tspan x = "20" dy = "1em">GREEN</tspan>
      <tspan x = "20" dy = "1em">BLUE</tspan>
    </text>//
  </g>
  <g>
    <rect x = "30" y = "140" width = "79" height = "71" transform = "translate(30, 140) rotate(NaN) translate(-30, -140)" fill = "transparent"></rect><text alignment-baseline = "middle" dy = "0.7em" x = "30" y = "140" font-size = "11px" fill = "rgb(0, 255, 0)" font-style = "none" font-weight = "0" text-decoration = "none" transform = "translate(30, 140) rotate(NaN) translate(-30, -140)">
      <tspan x = "30" dy = "0.7em">RED</tspan>
      <tspan x = "30" dy = "1em">GREEN</tspan>
      <tspan x = "30" dy = "1em">BLUE</tspan>
    </text>//
  </g>
  <g>
    <rect x = "40" y = "160" width = "79" height = "71" transform = "translate(40, 160) rotate(NaN) translate(-40, -160)" fill = "transparent"></rect><text alignment-baseline = "middle" dy = "0.7em" x = "40" y = "160" font-size = "11px" fill = "rgb(0, 0, 255)" font-style = "none" font-weight = "0" text-decoration = "none" transform = "translate(40, 160) rotate(NaN) translate(-40, -160)">
      <tspan x = "40" dy = "0.7em">RED</tspan>
      <tspan x = "40" dy = "1em">GREEN</tspan>
      <tspan x = "40" dy = "1em">BLUE</tspan>
    </text>//
  </g>
</svg>

textContent не является атрибутом, так что это просто tc = .....[1].textContent

— 03.06.2024 09:47

спасибо - Джароманда, если вы ответите своим комментарием, я с радостью приму это!

— 03.06.2024 10:13

Кстати, вам следует рассмотреть возможность использования querySelector(), поскольку это дает вам больше гибкости. Например, вы можете получить такой текст let tc = document.querySelector('g:nth-child(3) tspan').textContent

— 03.06.2024 21:40

javascript html

03.06.2024 09:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не обязательно использовать... .getAttibute("textContent")

В JS есть метод .textContent, который обеспечивает желаемый результат.

Ваш обновленный код должен выглядеть так:

window.addEventListener("load", function() {
    tc = ">"+document.getElementsByTagName("g")[2].getElementsByTagName("tspan")[1].textContent
    document.getElementById("output").textContent = tc
});

Это не метод

— 03.06.2024 10:54

03.06.2024 10:21