querySelectorAll

Question

我需要获得同一类div中所有产品的ID。我的代码只给了我第一个产品的ID。

以下是html代码

<td>
    <div class="b-sku">SKU: 123456</div>
</td>
<td>
    <div class="b-sku">SKU: 33333</div>
</td>

我创建了这个javascript代码来获取值

function (){
    var out0 = document.querySelector('.b-sku').textContent;
    var out1 = out0.replace(/SKU:/g, "");
    var out2 = out1.replace(/\s/g, '');
    return out2;
}

但此代码仅返回123456而不是33333 我想以逗号分隔格式获取两个ID，如

['123456', '33333']

请告知。

Answer 1

querySelectorAll

而不是使用querySelector使用querySelectorAll来解析要解析的NodeList个元素。

＆＃13;

function getBSKU() {
  var bSku = document.querySelectorAll('.b-sku');
  return Array.prototype.map.call(bSku, function(node) {
    var out1 = node.textContent.replace(/SKU:/g, "");
    var out2 = out1.replace(/\s/g, '');
    return out2;
  });
}

console.log(getBSKU())

＆＃13;

<td>
  <div class="b-sku">SKU: 123456</div>
</td>
<td>
  <div class="b-sku">SKU: 33333</div>
</td>

＆＃13;

现在，您使用Array给定

对元素进行排序

Answer 2

您可以使用.querySelectorAll()代替.querySelector()，它仅返回第一个匹配元素，spread元素将NodeList转换为Array，.map()返回数组

＆＃13;

function replaceSKU() {
  var skus = document.querySelectorAll('.b-sku');
  return [...skus].map(function(el) {
    return el.textContent.replace(/SKU:|\s/g, "");
  })
}

console.log(replaceSKU())

＆＃13;

<td>
  <div class="b-sku">SKU: 123456</div>
</td>
<td>
  <div class="b-sku">SKU: 33333</div>
</td>

＆＃13;

Answer 3

您可以使用.getElementsByClassName()获取具有给定类名的所有元素的列表，然后删除每个innerHTML的前五个字符，并将其余元素添加到结果列表中。

以下是一个例子：

function returnID()
{
  var elements = document.getElementsByClassName('b-sku');
  var out = [];
  
  for(var i =0; i < elements.length; i++)
  { 
     out.push(elements[i].innerHTML.substr(5));
  }
  
  return out;
}

console.log( returnID() );

<table>
<tr>
  <td>
  <div class="b-sku">SKU: 123456</div>
  </td>
  <td>
  <div class="b-sku">SKU: 33333</div>
  </td>
</tr>
</table>

Answer 4

这是一个简短的1行方法，使用Array.from，Object.values和Map来获取类型为['123456'，'33333']的新数组。

ES6版本

使用Array.from（）

let out2 = Object.values(document.getElementsByClassName('b-sku')).map(el => el.textContent.replace(/SKU: /i,""))

使用Object.values（）

let out2 = [...document.getElementsByClassName('b-sku')].map(el => el.textContent.replace(/SKU: /i,""))

使用点差运算符（...）（最快）

Phone

性能测试：https://jsperf.com/spread-vs-array-from-1/1

Answer 5

使用document.getElementsByClassName('some-class')并循环遍历节点并使用其文本内容或内部文本创建列表。

Answer 6

您应该使用document.querySelectorAll()。

并映射它们。

// Create an array from the NodeList, so we can use other array functions.
var elements = Array.from(document.querySelectorAll('.b-sku'));

// Basically a loop and setting the value to the ids
var ids = elements.map(element => {
      return element.textContent.replace(/SKU:|\s/g, "");
});


console.log(ids);

使用纯javascript从同一个类中获取所有div的值

6 个答案:

querySelectorAll