javascript - 如何访问div标签？

Question

我正在尝试访问嵌套的 div 标签。它很像一个二维数组。我希望我可以像访问它们一样访问它们并尝试在 javascript 中执行此操作。我正在制作一款战舰游戏，希望能够在用户猜测时更改棋盘上一个插槽的颜色。

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

遗憾的是，这不起作用(不是因为我的错误。它只是不起作用)。

我想知道是否有另一种类似于此的方法可以让我访问单独的嵌套 div 标签。

如果您想知道 div 标签是什么样子，这里是它们的一般表示。我使用 CSS 将它们制作成 10 x 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>

我这里有一个 fiddle 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'

您现在有一个包含第一个“文章”标签的所有 div 的数组。

如果您想将它与第二个“文章”标签结合起来创建一个多维数组，您可能需要遍历这两个数组并自行创建它。据我所知，DOM 没有提供任何开箱即用的创建二维数组的方法。自己这样做只是几个 for 循环的问题。