Как получить атрибуты в теге div?

Question

Я пытаюсь получить атрибуты в теге div, но я не знаю, как получить атрибуты первого дочернего элемента в div.

Я просматриваю веб-страницы и использую узел с кукловодом. Я пытаюсь получить настраиваемые атрибуты первого ребенка, тикер данных, тональность данных и все остальное, что есть. В примере HTML я хочу:

data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG"

Я хочу поместить «SPY, beari sh, 777, 123, BIG» в своего рода массив.

Измененный образец HTML веб-сайта ниже, внутри дочерних элементов больше div, но те, которые мне не нужны:

<div class="data-body">
   <div class="item bearflow " data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG">
   <div class="item bullflow " data-ticker="MSFT" data-sentiment="bullish" data-flowid="222" data-premiumpaid="321" data-ordertype="SMALL">
   <div class="item bullflow " data-ticker="AMD" data-sentiment="bullish" data-flowid="555" data-premiumpaid="132" data-ordertype="BIG">
   // more divs of the same format follow
>/div>

Вот что я пробовал:

let flow = document.querySelector('#optionflow > div.data-body > div:nth-child(1)').innerText; Это входит в первые дочерние элементы и дает мне его текст, бесполезный для меня.

let flow = document.querySelector('#optionflow > div.data-body')[0]; Я даже не уверен, имеет ли это вообще смысл!

Я новичок в JavaScript, я просмотрел HTML методы DOM, но ничего полезного не понял и не понял. Любая помощь приветствуется!

Answer 1

let flow = document.querySelector('div.data-body > div:nth-child(1)').attributes;
let modified = Array.from(flow).map(attribute => ({
    name: attribute.localName,
  value: attribute.nodeValue
}));
console.log(modified);

<div class="data-body">
<div class="item bearflow " data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG">aaa</div>
<div class="item bullflow " data-ticker="MSFT" data-sentiment="bullish" data-flowid="222" data-premiumpaid="321" data-ordertype="SMALL">bbb</div>
<div class="item bullflow " data-ticker="AMD" data-sentiment="bullish" data-flowid="555" data-premiumpaid="132" data-ordertype="BIG">ccc</div>
</div>

Попробуйте такой код. Массив 'attributes' - это не совсем массив, и он содержит много информации, которая вам не нужна, поэтому Arra.from().map() превращает его во что-то обычно используемое.

[edit] вместо localName и nodeValue, вы можете просто использовать name и value в соответствии с этой документацией

Answer 2

Может быть, это то, что вы ищете:

var sortArray = [];

$('.data-body').children().each(function() {;
  let attributes = $(this)[0].attributes;
  let str = "";
  let first = true;
  $(attributes).each(function(index) {
    if (index) {
      if (!first) {
        str += " ,";
      } else {
        first = false;
      }
      str += $(this)[0].value;
    }
  });
  sortArray.push(str);
});

console.log(sortArray);

Answer 3

querySelector поддерживает все допустимые селекторы CSS, поэтому выбирать элементы просто по их атрибутам намного проще, чем фильтровать их с помощью :nth-child()

Итак, если вы хотите выбрать этот элемент:

data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG"

Затем используйте:

const element = document.querySelector('[data-ticker="SPY"]');

console.log(element);

<div class="data-body">
<div class="item bearflow " data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG">aaa</div>
<div class="item bullflow " data-ticker="MSFT" data-sentiment="bullish" data-flowid="222" data-premiumpaid="321" data-ordertype="SMALL">bbb</div>
<div class="item bullflow " data-ticker="AMD" data-sentiment="bullish" data-flowid="555" data-premiumpaid="132" data-ordertype="BIG">ccc</div>
</div>

Или, если вам всегда нужен первый .item в .data-body, используйте

const element = document.querySelector('.data-body .item');

console.log(element);

<div class="data-body">
<div class="item bearflow " data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG">aaa</div>
<div class="item bullflow " data-ticker="MSFT" data-sentiment="bullish" data-flowid="222" data-premiumpaid="321" data-ordertype="SMALL">bbb</div>
<div class="item bullflow " data-ticker="AMD" data-sentiment="bullish" data-flowid="555" data-premiumpaid="132" data-ordertype="BIG">ccc</div>
</div>

Вы можете указать настраиваемые атрибуты data-*, используя element.dataset

const element = document.querySelector('.data-body .item');

console.log(element.dataset);

<div class="data-body">
<div class="item bearflow " data-ticker="SPY" data-sentiment="bearish" data-flowid="777" data-premiumpaid="123" data-ordertype="BIG">aaa</div>
<div class="item bullflow " data-ticker="MSFT" data-sentiment="bullish" data-flowid="222" data-premiumpaid="321" data-ordertype="SMALL">bbb</div>
<div class="item bullflow " data-ticker="AMD" data-sentiment="bullish" data-flowid="555" data-premiumpaid="132" data-ordertype="BIG">ccc</div>
</div>