如何获取div标签内的属性？

Question

我正在尝试获取 div 标签中的属性，但我不知道如何获取 div 中的第一个孩子的属性。

我正在使用 puppeteer 进行网络抓取和使用节点。我正在尝试获取第一个孩子的自定义属性、数据代码、数据情绪以及其中的其他所有内容。在 HTML 示例中，我想要：

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

我想将“SPY，看跌，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() 将它变成通常可用的东西。

[编辑] 而不是localName 和nodeValue，您可以只使用name 和value，根据this documentation

Answer 2

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>

或者，如果您总是希望.data-body 中的第一个.item 使用

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>

您可以使用element.dataset 列出自定义data-* 属性

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>

Answer 3

可能这就是你要找的东西：

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