Не получаеться вывести в консоль содержимое атрибута элементов

Question

На сайте есть текст, при наведении на некоторые слова всплывает подсказка в которой текст с объяснением термина, мне нужно вывести текст всех подсказок в консоль и я пользуюсь следующим кодом:

var i = 0;
var s='';
while (i < document.getElementsByClassName("term").length) {
s=s+document.getElementsByClassName('term')[i].innerHTML+'\n'
+document.getElementsByClassName('term')[i].getAttribute('data-original-title')+'\n';
i++;
}
console.log(s);

Но он работает только после того как самому пройтись по всем подсказкам и уже после его запустить, в противном случае он везде выводит null

Answer 1

Вытаскиваем значение стандартного атрибута:

let i = 0, s = '', a = [...document.querySelectorAll('.term')];
while (i < a.length) {
  s += `${a[i].innerHTML}\n${a[i].getAttribute('title')}\n`;
  i++;
}
console.log(s);

<p class="term" title="Подсказка 1">Термин 1</p>
<p class="term" title="Подсказка 2">Термин 2</p>

Пользовательские атрибуты (data-) извлекаются немного иначе:

let i = 0, s = '', a = [...document.querySelectorAll('.term')];
while (i < a.length) {
  s += `${a[i].innerHTML}\n${a[i].dataset.originalTitle}\n`;
  i++;
}
console.log(s);

<p class="term" data-original-title="Подсказка 1">Термин 1</p>
<p class="term" data-original-title="Подсказка 2">Термин 2</p>

Если неизвестно в каком из атрибутов:

let i = 0, s = '', a = [...document.querySelectorAll('.term')];
while (i < a.length) {
  s += `${a[i].innerHTML}\n${(a[i].getAttribute('title') || a[i].dataset.originalTitle) || 'Подсказки нэээту. Савсэм!'}\n`;
  i++;
}
console.log(s);

<p class="term">Термин 0</p>
<p class="term" title="Подсказка 1">Термин 1</p>
<p class="term" data-original-title="Подсказка 2">Термин 2</p>
<p class="term" title="Подсказка 3" data-original-title>Термин 3</p>
<p class="term" title data-original-title="Подсказка 4">Термин 4</p>

БЛОГ НА HUSL

Не получаеться вывести в консоль содержимое атрибута элементов

Ответы (1 шт):