Question

我有这样的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)

但输出为0，很奇怪。

Answer 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/

Answer 2

使用JQuery可以使用以下代码：

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

请参阅Get an array of list element contents in jQuery

Answer 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，因为在浏览器解析HTML正文之前会调用Javascript。

您需要： - 等待页面加载

<!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来说很重要，但在这种情况下，你应该进行文件包含）

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

3 个答案: