javascript - 如何在从 html 集合创建的数组中通过 for 循环从对象中获取元素的值？

Question

我有几个具有相同类名的 div，其中有许多元素我需要值(例如数字)来检查与另一个值是否相等，但我的方法不起作用。

首先，我得到了我想要的所有 div 的 html 集合。 我将 html 集合转换为数组，因此我可以遍历它。

var divCol = document.getElementsByClassName("test");
var arr = Array.prototype.slice.call( divCol );

for (var i = 0, len = arr.length; i < len; i++) {
    var again=arr[i];
    var pSize=again[i].getElementsByClassName("product_size").value;
    alert (pSize);
    [...]
            }

为了测试索引 i 处的 div 的“product_size”段落中存储的内容，我在 pSize 上使用了一个警报，但它说 pSize 未定义。

Answer 1

jsfiddle

假设您有类似这样的 HTML:

<div class="test"><p class="product_size">Lorem Ipsum 1</p></div>
<div class="test"><p class="product_size">Lorem Ipsum 2</p></div>
<div class="test"><p class="product_size">Lorem Ipsum 3</p></div>
<div class="test"><p class="product_size">Lorem Ipsum 4</p></div>

你可以这样做:

let divCol = document.getElementsByClassName('test');
let arr = Array.prototype.slice.call(divCol);

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i].firstChild.textContent);
}

定位每个 div 元素中的第一个子元素，这将是一个段落，然后获取该元素的 textContent，即段落文本。

控制台输出:

Lorem Ipsum 1
Lorem Ipsum 2
Lorem Ipsum 3
Lorem Ipsum 4

---

Get paragraph text inside an element
nodeValue vs innerHTML and textContent. How to choose?