如何HTML標題存儲在JavaScript數組

Question

我有一個JavaScript數組被硬編碼到我的JavaScript文件：

var avatar_layers = new Array('background', 'body', 'hair', 'shirt', 'arms', 'legs', 'feet', 'weapon') 

由於它是硬編碼，很難在不同的HTML文件之間使用它。

我想對其進行更改，以便JavaScript將查找所有在頁面上具有標題類的h3標籤，並使用這些標籤的內容創建數組。

我該怎麼做？

讀取周圍後，我發現我應該使用以下

document.getElementsByTagName（ 「h3.title」）[0];

這將獲得所有h3.titles。但是，我不確定如何以數組形式輸出收集的數據。

我真的很感激任何指針。謝謝！

更新：我不能使用jQuery，它是常規的Java腳本

你可以在這裏看到我的代碼：http://jsfiddle.net/zk5Hn/2/

Answer 1

​var array = []; 

(function(){ 
    var elements = document.getElementsByTagName("h3"); 
    for (var i = 0; i < elements.length; i++) { 
     array.push(elements[i].innerText); 
    } 
})(); 

​alert(array);​ 

嘗試。

http://jsfiddle.net/Jsckt/

或者你可以使用jQuery：

$(function(){ 
    var array = []; 

    $("h3.title").each(function() { 
     array.push(this.innerText); 
    }); 

    alert(array); 
}​;​ 

http://jsfiddle.net/Jsckt/2/

5年以後編輯：

1. 應避免使用的innerText theese天性能和期待性原因
2. 可以爆炸DOM節點列表，以陣列現在

你去那裏與2018年up2date的解決方案起：

const headings = [...document.querySelectorAll("h3.title")].map(node => node.textContent); 
alert(headings); 

Answer 2

不，document.getElementsByTagName不會應用類選擇，您需要使用document.querySelectorAll（因爲IE不支持傳統瀏覽器，您可能需要使用選擇器庫或其他解決方法）。

然後，你有一個NodeList回來，它已經像一個元素數組。遍歷它，每一個元素的內容添加到您的數組：

var headingEls = document.querySelectorAll("h3.title"); 
var avatar_layers = []; // empty array literal 
for (var i=0; i<headingEls.length; i++) 
    avatar_layers.push(headingEls[i].textContent); 

不要忘記，你可以訪問元素直到DOM被加載後，您將需要執行一個domready事件片段;你不能立即使用數組。

Answer 3

var h3s = document.getElementsByTagName("h3"); 

var arr = [].map.call(h3s, function(el) { 
           return el.textContent || el.innerText; 
          }); 

你可以得到一個補丁在這裏舊的瀏覽器.map：MDN .map

Answer 4

喜歡的東西：

var titles = document.querySelectorAll('.title'), 
    avatar_layers = []; 
for(var i=0; i<titles.length; i++) { 
    avatar_layers.push(titles[i].innerHTML); 
} 

這將創建一個新的，空陣列。然後查看所有具有類.title的元素並提取它的HTML內容。然後將這些內容推入數組中。

使用jQuery這將是非常簡單的：

var avatar_layers = $('.title').map(function(){ 
    return $(this).html(); 
}); 

這是你想要的嗎？

請注意，IE7-不支持querySelectorAll，所以如果您需要對這些瀏覽器的支持，則需要使用類似jQuery的庫或其他解決方法。

Answer 5

如果你正在使用jQuery的話，

var titleArray = new Array(); 
$('h3.title').each(function(){ 
    titleArray.push($(this).text()); 
}); 

alert(titleArray); 

演示：http://jsfiddle.net/muthkum/WVsEB/3/

Answer 6

<h3 class = 'title'>trtr</h3> 
<h3 class = 'title'>tcrtr</h3> 
<h3 class = 'title'>tdrtr</h3> 
<h3 class = 'title'>trrtr</h3> 
<h3>trgtr</h3> 

var arrayDemo = []; 
$.each($('h3[class*=title]'), function() { 
     arrayDemo.push(this.innerHTML); 
}); 

alert(arrayDemo); 

下面是該 http://jsfiddle.net/ymtFg/

Answer 7

舊版本的Javascript的演示沒有一個NATIV方法通過屬性'class'選擇元素。在過去，我找到了一種自我創造的方法來填補這個空白。您可以找到解決方法here。此功能對IE6無效