1

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

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

可悲的是，这不起作用（不是因为我的错误。它只是不起作用）。

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

如果你想知道这里的 div 标签是什么样子的，那么这里就是它们的一般表示。我使用 css 将它们制成 10 x 10 板。我必须董事会。（article[0] 的原因） 每行嵌套了十个 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 基础知识的时候做的，所以请耐心等待。

4

1 回答 1

2

AS 请在发布错误代码时包含来自javascript 控制台的错误。

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

这在很多层面上都是错误的。

document是一个包含页面所有 HTML 节点的对象。返回属性等于“article”document.getElementsByTagName("article")的所有 HTML 节点的数组。name

您假设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 循环的问题。

于 2013-08-19T01:26:46.967 回答