Существует веб-страница, с которой я хочу записать некоторый текст, когда этот текст изменяется. Текст, который я хочу записать (обозначен --->TEXT HERE
в приведенном ниже коде), динамически изменяется в HTML, когда мышь наводит курсор на график SVG.
Когда я наводим указатель мыши на график SVG Я хочу сохранить любое измененное значение в этих двух текстовых узлах и сохранить их в структуре данных JavaScript, к которой я смогу получить доступ позже.
Я могу запустить дополнительный код JavaScript на странице, но я не может изменить ни один из уже существующих JavaScript, HTML или CSS.
HTML, содержащий текст, который я хочу записать, выглядит следующим образом:
[...]
<text x="8" data-z-index="1" style="font-size:12px;color:#333333;cursor:default;fill:#333333;" y="20">
<span style="font-size: 10px">
--->TEXT HERE
</span>
<span style="fill:#90ed7d" x="8" dy="15">+</span>
<span dx="0"> Value: </span>
<span style="font-weight:bold" dx="0">
--->TEXT HERE
</span>
</text>
[...]
В качестве примера я отсканировал следующий код, чтобы прояснить, что я хочу сделать:
// we do not want a blocking browser, so we need some sleep
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// here we are going to save the values from "--->TEXT HERE"
var myvalues = []
async function foo() {
while(true){
// Loop until I change the textcontent to "AAA" in the Inspector - stopping with a mouseclick anywhere would be nicer
if (document.getElementsByTagName('text')[28].childNodes.item(0).textContent == "AAA")
break;
val = document.getElementsByTagName('text')[28].childNodes.item(0).textContent +" "+ document.getElementsByTagName('text')[28].childNodes.item(3).textContent;
if (!myvalues.includes(val))
myvalues.push(val);
console.log('Sleep');
await sleep(100);
}
}
foo();
Однако периодическая проверка изменений не гарантирует, что я увижу каждое изменение.
Как записать в некоторую JavaScript структуру данных каждое изменение в тексте в областях, указанных выше --->TEXT HERE
?