如何使用 Javascript 将 HTML 属性添加到数组

Question

我正在尝试将三个 HTML 元素的属性添加到一个数组中。

这是一些示例 HTML:

<p x="30">Paragraph 1</p>
<p x="50">Paragraph 2</p>
<p x="100">Paragraph 3</p>

这是让我最接近我正在寻找的结果的 Javascript：

const paragraphs = document.querySelectorAll(`p`);
      let i;
      for (i = 0; i < paragraphs.length; i++) {
        let dataSetOne = paragraphs[i].getAttribute('x');
        let dataSetOneArray = Array.from(dataSetOne);

      }

当我console.log(dataSetOne)时，我得到“30”“50”“100”，这正是我所希望的。

当我尝试使用 Array.from(dataSetOne) 将这些属性添加到一个数组时，我最终得到三个如下所示的数组：Array(1) [ "3", "0" ];数组(2) [ "5", "0" ] 数组(3) [ "1", "0", "0" ].

我要找的数组是这样的：Array ["30", "50", "100"]

我尝试了一些其他功能，但是 none 这些功能让我更接近我正在寻找的结果。

这不是针对特定项目的。我正在努力提高我对数组和面向对象编程的理解。

在此先感谢您的帮助。

Answer 1

Array.from()

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

由于您在每次迭代中的 for 循环内使用 Array.from()，因此正在创建新数组。您可以简单地在循环外声明数组 (dataSetOneArray) 并直接推送属性值。

const paragraphs = document.querySelectorAll(`p`);
let dataSetOneArray = [];
let i;
for (i = 0; i < paragraphs.length; i++) {
  let dataSetOne = paragraphs[i].getAttribute('x');
  dataSetOneArray.push(dataSetOne);
}

不过，您可以使用 Array.prototype.map():

以更简单的方式实现这一点

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

var elList = Array.from(document.querySelectorAll('p'));
var res = elList.map(el => el.getAttribute('x'));
console.log(res);

<p x="30">Paragraph 1</p>
<p x="50">Paragraph 2</p>
<p x="100">Paragraph 3</p>

Answer 2

怎么样

let dataSetOneArray = [];
for (i = 0; i < paragraphs.length; i++) {
    let dataSetOne = paragraphs[i].getAttribute('x');
    dataSetOneArray.push(dataSetOne);
  }

如何使用 Javascript 将 HTML 属性添加到数组

How do I add HTML attributes to an array using Javascript

html

javascript

arrays

attributes