如何访问div标签?

时间:2013-08-19 01:14:56

标签: javascript html5 html

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

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

可悲的是,这不起作用(不是因为我的错误。它只是不起作用)。

我想知道是否还有其他方法可以让我获取单独的嵌套div标签。

如果您想知道div标签的外观,这里是它们的一般表示。我使用css将它们变成10×10的板。我必须登上董事会。 (文章[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的基础知识,所以请耐心等待。

1 个答案:

答案 0 :(得分:2)

A.S。请在发布错误代码时包含javascript console中的错误。


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

这在许多层面都是错误的。

document是一个包含页面所有HTML节点的对象。 document.getElementsByTagName("article")返回所有HTML节点的数组,其属性name等于&#34;文章&#34;。

您假设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'

你现在有一个数组,其中包含第一篇&#34;文章&#34;的所有div。标签

如果你想将它与第二篇&#34;文章&#34;要创建多维数组的标记,您可能希望迭代2个数组并自己创建它。据我所知,DOM没有提供任何方法来创建开箱即用的二维数组。你自己这样做只是一些循环问题。