如何從html使用JavaScript獲取數組？

我有一個這樣的HTML：如何從html使用JavaScript獲取數組？

<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，這是奇怪的。

來源

2014-10-30 liyuhao

你的代碼是有效的。 http://jsfiddle.net/gilleez/gez37k9m/ – 2014-10-30 12:29:49

您的代碼日誌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/

來源

2014-10-30 12:33:44 pawel

你必須要小心何時何地，你做你的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顯著，但在這種情況下，你應該做的文件包含）

來源

2014-10-30 12:33:25 yunandtidus

非常感謝。我在閱讀你的答案後解決了這個問題。 JS應該在DOM確定之後加載。 – liyuhao 2014-10-30 12:37:05

使用jQuery你可以使用此代碼：

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

看到Get an array of list element contents in jQuery

來源

2014-10-30 12:37:54

或更簡單的'$（「。item h1」）。map（function（）{return $（this）.text（）}）;'但這個問題沒有標記爲'jQuery'。 – pawel 2014-10-30 12:40:46

如何從html使用JavaScript獲取數組？

回答

相關問題