用javascript获取多个元素li

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

您应该可以选择每个li使用querySelectorAll然后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元素，你可以做这样的事情：

Live Preview

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>