使用javascript获取多元素li

我需要从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>

我得到了答案：

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

4G LTE
双Sim
RAM 1GB

展开@Tushar注释：

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

---

检查演示-。

在@Tushar评论上展开：

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

---

检查演示-。

这里有一个简单易懂的答案

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

var items=document.querySelectorAll（“.item highlights li”）；
var值=[]；
对于（变量n=0；n

---

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

这是一个易于理解的答案

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

var items=document.querySelectorAll（“.item highlights li”）；
var值=[]；
对于（变量n=0；n

---

如果您了解css，那么更改对“querySelectorAll”的调用就很简单，因为它只是通过css的相同方式进行比较，因此您可以随意更改它。

您应该能够使用

querySelectorAll

选择每个

li

，然后

映射这些值。它看起来是这样的：

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


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

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

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


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

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

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


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


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>


详细产品

4G LTE
双卡
内存1GB


ROM 8GB
屏幕5.5
保修期1年


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"));

//存储列表元素
var list=document.getElementsByTagName（'li'）；
//数组来容纳li元素
变量元素=[]；
//循环浏览列表
对于（变量i=0；i
如果要选择每个li元素，可以执行以下操作：

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


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


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>


详细产品

4G LTE
双卡
内存1GB


ROM 8GB
屏幕5.5
保修期1年


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"));

//存储列表元素
var list=document.getElementsByTagName（'li'）；
//数组来容纳li元素
变量元素=[]；
//循环浏览列表
对于（变量i=0；i
函数getElementsByCassName返回一个数组。只需对其进行迭代，而不是使用“[0]”仅获取第一个元素


函数getValue（）{
var test=document.getElementById（'block-system-main'）.getElementsByClassName（'item-highlights'）；
var数组=[]；
对于（变量i=0；i

详细产品

4G LTE
双卡
内存1GB


ROM 8GB
屏幕5.5
保修期1年

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


函数getValue（）{
var test=document.getElementById（'block-system-main'）.getElementsByClassName（'item-highlights'）；
var数组=[]；
对于（变量i=0；i

详细产品

4G LTE
双卡
内存1GB


ROM 8GB
屏幕5.5
保修期1年

1。
块系统主功能在哪里？2.为什么同一个类在
getElementsByClassName（'item-highlights-item-highlights'）中使用了两次
3。要获取innerHTML，请迭代HTMLCollection并获取单个元素的
innerHTML
。1。对不起，我忘了把它放进去，block system main的id在2上。我想我可以上2级。你能帮我更正代码吗。
块系统主功能在哪里？2.为什么同一个类在
getElementsByClassName（'item-highlights-item-highlights'）中使用了两次
3。要获取innerHTML，请迭代HTMLCollection并获取单个元素的
innerHTML
。1。对不起，我忘了把它放进去，block system main的id在2上。我想我可以上2级。您能帮我更正代码吗？更好的选择器：
document.queryselectoral（“#block system main.item highlights”）
，但输出答案是
4G LTE
双Sim
RAM 1GB
ROM 8GB
屏幕5.5保修期仅用于获取
内部文本？？？。CC@Stevenandrian必须在中使用
innerText
而不是