CODEWITHSUNDEEP
javascripthtml
zall
zall

Reputation: 585

How to access div tags?

I am trying to access nested div tags. It is much like a two dimensional array. I was hoping I could access them like one and tried to do this in javascript. I am making a game of battleship and want to be able to change the color of one slot on the board when a user guesses there.

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

Sadly this doesn't work (not because of error on my part. It just doesn't work that way).

I was wondering If there was another way similar to this that would let me acess separate nested div tags.

If you are wondering what the div tags look like here is a general representation of them. I use css to make them into a 10 by 10 board. And I have to boards. (the reason for article[0]) There are ten div tags nested in one on each line.

<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>

I have a fiddle of it here http://jsfiddle.net/zachooz/hL4Qk/. Its a bit messy because I made it a bit ago while I was still learning the basics of html so bear with me.

Upvotes: 1

Views: 334

Answers (1)

Saturnix
Saturnix

Reputation: 10564

A.S. please include errors from the javascript console when posting buggy code.

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

This is wrong on many levels.

document is an object which contains all the HTML nodes of the page. document.getElementsByTagName("article") returns an array of all of the HTML nodes with the attribute name equals to "article".

The logic with which you assume document is contained inside of this array is plain wrong: document.getElementsByTagName.document has no meaning.

Instead, this is what you want to do.

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'

You now have an array containing all the divs of the first "article" tag.

If you want to combine this with the second "article" tag to create a multidimensional array, you might want to iterate over the 2 arrays and create it by yourself. As far as I know, the DOM does not provide any method to create 2d array out-of-the-box. Doing so by yourself is just a matter of a few for loops.

Upvotes: 2

Related Questions