Question

我的代码是......

如何使用原生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>

非常感谢。

Answer 1

除非你想要每个<li>之间的文本节点，否则使用childNodes不是一个好主意。 getElementsByTagName('li')出了什么问题？

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;
}

Answer 2

试试这个：

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

Answer 3

var LIs = document.getElementById('list').childNodes;
var list = [];
for( var i = 0; i < LIs.length; ++i )
{
    var LI = LIs[i];
    list.push(LI.innerText || LI.textContent);
}

和往常一样，使用jQuery的简单方法：

var list = $('#list li').map(function(){ return $(this).text(); });

Answer 4

几乎所有Javascript library（Prototype，jQuery，Closure，...）都会让这更容易，但如果你想自己做：

你很接近，你的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来检索LI的内容，因为它得到了广泛的支持。或者，您可以在Firefox上使用innerText（以及其他一些）和textContent，但请注意，他们不会完全同样的事情（{{1} Firefox上将包含textContent标签的内容，例如，这可能不是你想要的。）

Answer 5

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

var theArray = [];

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

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

5 个答案: