使用getElementsByTagName和getAttribute方法

我組合了getElementsByTagName和getAttribute方法來獲取文檔中每個段落元素的title屬性。下面是代碼：使用getElementsByTagName和getAttribute方法

var paras = document.getElementsByTagName('p'); 
for (i = 0; i < paras.length; i++) { 
    console.log(paras[i].getAttribute('title')); 
}

的代碼行我特別需要援助，這一個：

console.log(paras[i].getAttribute('title'));

什麼是[i]這行代碼中做什麼？這是我在for循環中聲明的'counter'變量，它在每次迭代中遞增？ [i]也代表由getElementsByTagName函數返回的數組的索引嗎？

來源

2013-01-24 user1554264

1）是的。 2）是的。 –

謝謝您的確認。 – user1554264

這裏的關鍵是getElementsByTagName返回NodeList。

然後，您正在循環遍歷NodeList（可以認爲是一個數組）與您的循環。 i的值從0變爲數組-1的長度。

所以要回答你的問題。是的，i是索引，當您說paras[i]時，您需要索引i處的元素。

例如，假設下面的HTML：

<body> 
    <p id="a"></p> 
    <p id="b"></p> 
    <p id="c"></p> 
</body>

如果你叫paras = document.getElementsByTagName("p")它會返回一個數組3個元素。

在paras[0]將是ID爲a的p。
在paras[1]將是ID爲b的p。
在paras[2]將是ID爲c的p。

來源

2013-01-24 14:22:01

請注意，'getElementsByTagName'實際上會返回一個'NodeList'，而不是真正的數組。但它有一個'length'屬性，所以它的行爲大部分就像一個真正的數組（但是例如你不能這樣做）。 –

@JamesAllardice你說得對，我相應地更新了答案。 –

是的，你說得對。段實際上是所有p標籤的包含所有特殊屬性

數組對象在DOM中，你可以在Chrome開發者工具運行，看看爲你的自我

來源

2013-01-24 14:22:03

正如詹姆斯已經說過了，是的，是的。

.getElementsByTagName返回數組。可以通過使用索引該數組中訪問的每個項目，例如：

paras[0]

訪問第一元件（索引在JavaScript中從0開始 - 但要小心，一些語言從1開始）。

paras[1]

訪問的第二個項目，依此類推......

它使用一個for循環陣列中的所有元素進行迭代，所以你可以做一些事情，以每個項目的通用模式。所以：

paras[i]

訪問您的陣列中的我個元素。

來源

2013-01-24 14:23:41

getElementsByTagName返回一個數組。所以，你可以通過索引訪問每個元素。例如：

paras[0]; // first <p> in your document 
paras[1]; // second <p> in your document 
paras[2]; // third <p> in your document 
paras[3]; // fourth <p> in your document

來源

2013-01-24 16:25:55

使用getElementsByTagName和getAttribute方法

回答

相關問題