如何使用 javascript 从 html 中获取数组？答案

【问题标题】：How to get an array from html using javascript?如何使用 javascript 从 html 中获取数组？
【发布时间】：2014-10-30 20:37:54
【问题描述】：

我有一个这样的 HTML：

<div class='item'>
    <h1 id="Python">Python</h1>
</div>

<div class='item'>
    <h1 id="C++">C++</h1>
</div>

<div class='item'>
    <h1 id="PHP">PHP</h1>
</div>

如何使用javascript获取[Python, C++, PHP]之类的数组？

我试过这样写：

var myList = document.getElementsByTagName('h1');
console.log(myList.length)

但是Output是0，很奇怪。

【问题讨论】：

您的代码有效。 jsfiddle.net/gilleez/gez37k9m

标签： javascript

【解决方案1】：

你的代码日志3:http://jsfiddle.net/t0ho10hw/

要获得语言数组，您可以将HTMLCollection 转换为实际的Array，然后将.map 转换为语言：

var myList = document.getElementsByTagName('h1');
var languages = [].slice.call( myList ).map( function( item ){
    return item.innerHTML;
});

http://jsfiddle.net/t0ho10hw/1/

或者Array.map之前的“经典”方式：

var languages = [];
for( var i=0; i<myList.length; i++){
   languages.push( myList[i].innerHTML );
}

http://jsfiddle.net/t0ho10hw/2/

【讨论】：

【解决方案2】：

使用 JQuery 你可以使用这个代码：

var tab = [];
$(".item h1").each(function() {
    tab.push($(this).text());
 });

见Get an array of list element contents in jQuery

【讨论】：

或更简单的$(".item h1").map(function(){ return $(this).text() });，但问题没有标记jQuery。

【解决方案3】：

您需要小心何时何地进行 JS 计算

<!DOCTYPE html>
<html>
  <head>
    <script>
        var myList = document.getElementsByTagName('h1');
        console.log(myList.length)
    </script>
  </head>
  <body>
    <div class='item'>
        <h1 id="Python">Python</h1>
    </div>

    <div class='item'>
        <h1 id="C++">C++</h1>
    </div>

    <div class='item'>
        <h1 id="PHP">PHP</h1>
    </div>
</style>
</body>
</html>

会给你 0，因为 Javascript 在你的浏览器解析 HTML 正文之前被调用。

您需要： - 等待页面加载

<!DOCTYPE html>
<html>
  <head>
    <script>
        window.onload = function(){
            var myList = document.getElementsByTagName('h1');
            console.log(myList.length)
        }
    </script>
  </head>
  <body>
    <div class='item'>
        <h1 id="Python">Python</h1>
    </div>

    <div class='item'>
        <h1 id="C++">C++</h1>
    </div>

    <div class='item'>
        <h1 id="PHP">PHP</h1>
    </div>
</style>
</body>
</html>

或在页面末尾写下这段 javascript：

<!DOCTYPE html>
<html>
  <head>
    <script>
        var myList = document.getElementsByTagName('h1');
        console.log(myList.length)
    </script>
  </head>
  <body>
    <div class='item'>
        <h1 id="Python">Python</h1>
    </div>

    <div class='item'>
        <h1 id="C++">C++</h1>
    </div>

    <div class='item'>
        <h1 id="PHP">PHP</h1>
    </div>
</style>
</body>
</html>

更好的办法是在页面末尾加上window.onload。到达页面的 HTML 部分会更短，渲染会更快（这对于大量 JS 来说很重要，但在这种情况下，你应该进行文件包含）

【讨论】：

非常感谢。阅读您的答案后，我解决了问题。 JS 应该在 DOM OK 后加载。