Javascript 如何将无序列表项放入数组

我的代码是

如何使用本机javascript将每个列表项中的文本放入数组

<ul id="list">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<script type="text/javascript">
var list = document.getElementById('list').childNodes.TextNode;
for(var i=0;i < list.length; i++) {
    var arrValue = list[i];
    alert(arrValue);
}
</script>

清单项目1
清单项目2
清单项目3
清单项目4

var list=document.getElementById（'list'）.childNodes.TextNode；
对于（变量i=0；i

非常感谢。

试试这个：

var list = document.getElementById('list').childNodes;
var theArray = [];
for(var i=0;i < list.length; i++) {
    var arrValue = list[i].innerHTML;
    alert(arrValue);
    theArray.push(arrValue);
}

var list=document.getElementById（'list'）.childNodes；
var theArray=[]；
对于（变量i=0；i

几乎任何（、…）都会使这更容易，但如果您想自己做：

很接近，Javascript应该如下所示：

window.onload = onPageLoad; // Or any of several other similar mechanisms
                            // (you could just run it at the bottom of the page)
function onPageLoad() {
    var node, list, arrValue;

    list = [];
    for (node = document.getElementById('list').firstChild;
        node;
        node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == 'LI') {
            list.push(node.innerHTML);
        }
    }

    // `list` now contains the HTML of each LI element under the `ul#list` element
}

说明：

• 在使用

  document.getElementById

  之前，您需要确保DOM已准备好进行此操作。它肯定在

  onload

  时就准备好了，如果您愿意的话，有各种机制可以提前一点触发您的代码（包括将脚本放在末尾）
• 循环从获取

  ul#list

  元素的第一个子元素开始，然后继续，只要还有更多的同级元素
• 在循环中，我们检查每个节点是否是一个元素（

  nodeType==1

  ），其标记名是否为“li”
• 如果是，我们检索它的HTML并将其推送到数组中

---

我使用

innerHTML

检索LIs的内容，因为它得到广泛支持。或者，你可以在IE（和其他一些）上使用

innerText

，也可以在Firefox上使用

textContent

，但要注意它们做的事情并不完全相同（例如，Firefox上的

textContent

将包含

脚本

标记的内容，这可能不是你想要的）。

getElementsByTagName（'li'）

有什么问题吗

var listItems=document.getElementById（'list'）.getElementsByTagName（'li'），
myArray=map（listItems，getText）；
函数映射（arrayLike，fn）{
var ret=[]，i=-1，len=arrayLike.length；
而（++i

var list=document.getElementsByTagName（'ul'）[0].getElementsByTagName（'li'）

var theArray=[]；
对于（变量i=0；i

@J-P：这当然是一个选择；无论哪种方式，它都是一个循环，使用

getElementsByTagName

都需要第二次函数调用和创建节点列表，如果仍然要循环，这似乎是不必要的。（这是你的否决票吗？如果是这样的话，就换一种方式来说似乎有点苛刻…

childNodes

包含空格文本节点，而

innerHTML

没有定义

innerHTML

将为某些文本返回转义字符。到目前为止效果最好，不过嵌套列表如果存在的话会有问题，因为

getElementsByTagName

当然是分层的。为什么不干脆

map（listItems，getText）

，尽管如此？@bibince已更改为

map（listItems，getText）

。谢谢

childNodes

包含列表中不需要的空白文本节点（并且未为其定义

innerText

）

| |

对空字符串

innerText

的测试失败，IE将

未定义的
放入数组中。使用jQuery更简单：
var list=$（'#list li'）.map（函数（）{return$.text（[this]）
nickf的答案基本上是使用getElementsByTagName，而不是使用childnodes
var list = $('#list li').map(function(){ return $(this).text(); });

window.onload = onPageLoad; // Or any of several other similar mechanisms
                            // (you could just run it at the bottom of the page)
function onPageLoad() {
    var node, list, arrValue;

    list = [];
    for (node = document.getElementById('list').firstChild;
        node;
        node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == 'LI') {
            list.push(node.innerHTML);
        }
    }

    // `list` now contains the HTML of each LI element under the `ul#list` element
}

var listItems = document.getElementById('list').getElementsByTagName('li'),

    myArray = map(listItems, getText);

function map(arrayLike, fn) {
    var ret = [], i = -1, len = arrayLike.length;
    while (++i < len) ret[i] = fn(arrayLike[i]);
    return ret;
}

function getText(node) {
    if (node.nodeType === 3) return node.data;
    var txt = '';
    if (node = node.firstChild) do {
        txt += getText(node);
    } while (node = node.nextSibling);
    return txt;
}

var theArray = [];

for (var i = 0; i < list.length; i++) {
    var arrValue = list[i].innerHTML;
    console.log(arrValue);
    theArray.push(arrValue);
}