如何訪問div標籤？

Question

我想訪問嵌套div標籤。這很像一個二維數組。我希望我可以像訪問它們一樣訪問它們，並試圖在JavaScript中執行此操作。我正在製作一艘戰艦遊戲，並希望能夠在用戶猜測時改變主板上一個插槽的顏色。

document.getElementsByTagName("article")[0].document.getElementsByTagName("div") 
[0].document.getElementsByTagName("div")[0].style.backgroundColor='red' 

不幸的是，這不起作用（不是因爲我的錯誤，它只是不這樣工作）。

我想知道如果有另一種方式類似於這將讓我訪問單獨的嵌套div標籤。

如果你想知道div標籤是什麼樣子，這裏是它們的一般表示。我使用CSS來使它們成爲10乘10的棋盤。我必須登上。 （文章[0]的原因）每行有一個嵌套10個div標籤。

<article> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 

</article> 

<article> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 
    <div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> 

</article> 

我在這裏有一把小提琴http://jsfiddle.net/zachooz/hL4Qk/。它有點凌亂，因爲我在一段時間之前做了一些，而我還在學習html的基礎知識，所以請耐心等待。

Answer 1

A.S.請在發佈錯誤代碼時包含來自javascript console的錯誤。

---

document.getElementsByTagName("article")[0].document.getElementsByTagName("div") 

這是錯誤的在許多層面上。

document是一個包含頁面所有HTML節點的對象。 document.getElementsByTagName("article")返回一個包含屬性name等於「article」的所有HTML節點的數組。

您假設document包含在此數組內的邏輯是明顯錯誤的：document.getElementsByTagName.document沒有意義。

相反，這是你想要做的。

var divs = document.getElementsByTagName("article")[0] 
var array = new Array(); 
for (var i = 0; i < divs.children.length; i++) { 

    array[i] = divs.children[i] 

} 

array[2].style.backgroundColor = 'red' 

您現在有一個包含第一個「article」標籤的所有div的數組。

如果您想將其與第二個「article」標記結合以創建多維數組，您可能需要迭代2個數組並自行創建它。據我所知，DOM沒有提供任何方法來創建2d數組。自己這樣做只是幾個循環的問題。