用javascript获取多元素锂

Question

我需要从HTML代码中获取li的所有值。

<div class="row">
<div style="margin-left:11px">
    <strong>Detail Product</strong>
</div>
    <div class="col-sm-12">
        <ul class="item-highlights">
            <li>4G LTE</li>
            <li>Dual Sim</li>
            <li>RAM 1GB</li>
        </ul>
    </div>
    <div class="col-sm-12">
        <ul class="item-highlights">
            <li>ROM 8GB</li>
            <li>Screen 5.5</li>
            <li>Warranty 1 Year</li>
        </ul>
    </div>

这就是我用javascript的方法：

var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights item-highlights')[0].innerHTML;

我得到答案：

<li>4G LTE</li><li>Dual Sim</li><li>RAM 1GB</li>

Answer 1

扩展@Tushar评论：

var test = '';
[].forEach.call( document.querySelectorAll('#block-system-main .item-highlights'), function(item) { return test += item.innerText; })

检查演示Fiddle 。

Answer 2

这是一个易于理解的答案。

var items = document.querySelectorAll( ".item-highlights li");
var values = [];
for( var n = 0; n < items.length; n++)
    values.push( items[n].innerHTML);

如果您知道css，那么将调用更改为“ querySelectorAll”很简单，因为它仅通过css相同的方式进行比较，因此您可以随意更改它。

Answer 3

您应该能够使用querySelectorAll选择每个li ，然后map这些值。 它看起来像这样：

var listItems = Array.prototype.slice.call(document.querySelectorAll('li'));


var vals = listItems.map(function (item) {
  return item.innerHTML;
});

示例： http ： //jsbin.com/zumewidoyo/edit？html，js，console

Answer 4

如果要选择每个li元素，则可以执行以下操作：

实时预览

的HTML

<div class="row">
<div style="margin-left:11px">
    <strong>Detail Product</strong>
</div>
    <div class="col-sm-12">
        <ul class="item-highlights">
            <li>4G LTE</li>
            <li>Dual Sim</li>
            <li>RAM 1GB</li>
        </ul>
    </div>
    <div class="col-sm-12">
        <ul class="item-highlights">
            <li>ROM 8GB</li>
            <li>Screen 5.5</li>
            <li>Warranty 1 Year</li>
        </ul>
    </div>

的JavaScript

//store the list elements
var lists = document.getElementsByTagName('li');

//array to hold the li elements
var liElements = [];

//loop through the lists
for (var i = 0; i < lists.length; i++) {

  //add the li element values to the array
  liElements.push(lists[i].innerHTML);

}

//show the results
alert(liElements.join("\n"));

Answer 5

函数getElementsByClassName返回一个数组。 只需对其进行迭代，而不是使用“ [0]”仅获取第一个元素。

 function getValue() { var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights'); var array = []; for (var i = 0; i < test.length; i++) { var liList = test[i].getElementsByTagName('li'); for (var j = 0; j < liList.length; j++) array.push(liList[j].innerHTML); } return array; } alert(getValue()); 

 <div id="block-system-main"> <div class="row"> <div style="margin-left:11px"> <strong>Detail Product</strong> </div> <div class="col-sm-12"> <ul class="item-highlights"> <li>4G LTE</li> <li>Dual Sim</li> <li>RAM 1GB</li> </ul> </div> <div class="col-sm-12"> <ul class="item-highlights"> <li>ROM 8GB</li> <li>Screen 5.5</li> <li>Warranty 1 Year</li> </ul> </div> </div> </div>