0

I'm new to javascript. I created this div called colorme. I can successfully color it via javascript. Now assuming i want to change the background of <p>...</p>, or <span>,etc how do i reach it via Javascript? (no jquery).

Like document.getElementById() would work on the div and i reach it. Now i cannot keep giving unique id's to all the elements. How do i reach the inner elements like <p> or <span>, etc?

<div id="colorme">
  <p>Blah Vblah Blah Content</p>
  <span>Blah Vblah Blah Content</span>
</div>
Improve this question

10 Answers 10

Reset to default
4

You can use the element that you've found as a context for getElementsByTagName.

var colorme = document.getElementById('colorme'),
    spans = colorme.getElementsByTagName('span');

Note that spans is a NodeList -- similar to an array -- containing all the span elements within colorme. If you want the first one (indeed, the only one in your code sample), use spans[0].

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

You should check out the many DOM traversal functions provided in standard javascript.

Tutorial: http://www.quirksmode.org/dom/intro.html

Reference: http://reference.sitepoint.com/javascript/Node

and http://reference.sitepoint.com/javascript/Element

Improve this answer

Comments

3

Here are three ways:

  1. If you only care about decent browsers, document.querySelector (returns the first matching node) and document.querySelectorAll (returns a NodeList) - e.g. document.querySelector('#colorme p').

  2. HTMLElement.getElementsByTagName() (returns a NodeList) - e.g. document.getElementById('colorme').getElementsByTagName('p')[0]

  3. HTMLElement.children, etc. - document.getElementById('colorme').children[0] (.firstChild will probably be a text node, lots of fun DOM stuff to get into there, the quirksmode DOM intro linked to is good stuff).

Improve this answer

Comments

2

Although the answers do give good ways to do it for this specific case....

The issue you're facing is called DOM-traversal. As you know, the DOM is a tree, and you can actually traverse the tree without knowing in advance the element id/type/whatever.

The basics are as follows

  • el.childNodes to access a list of children
  • el.parentNode to access the parent element
  • nextSibling and previousSibling for next and previous sibling nodes

For further info, see [MDC DOM pages](

Improve this answer

Comments

1

It's quite simple: getElementsByTagName()?

Improve this answer

Comments

0

You could use getElementsByTagName()

Improve this answer

Comments

0

Loop through the children:

var div = document.getElementById('colorme');

var i, l, elem;

for (i = 0, l = div.childNodes.length; i < l; i++) {
    elem = div.childNodes[i];

    // Check that this node is an element
    if (elem.nodeType === 1) {
        elem.style.color = randomColorGenerator();
    }
}
Improve this answer

1 Comment

Note that in newer browsers you can loop through div.children instead of having to check the nodeType. The children collection contains only Element objects, whereas childNodes contains all node types (elements, text nodes, comments nodes, etc).
0

In this case you can use:

var colormeDiv = document.getElementById('colorme');

var e1 = colormeDiv.getElementsByTagName('p');

var e2 = colormeDiv.getElementsByTagName('span');

to get the two elements inside 'colorme' div.

Improve this answer

Comments

0

getElementById is just one of JavaScript's DOM methods. It returns an HTMLElement DOM object which you can then query to find child, parent and sibling elements. You could use this to traverse your HTML and find the elements you need. Here's a reference for the JavaScript DOM HTMLObject.

Improve this answer

Comments

-1

[after answering, I realised this is no answer to your fully explained question, but it is the answer to the question raised in the title of your post!]

One nice way of doing this is declaring a global var on the top of your Javascript that refers to the document, which can then be used everywhere (in every function):

<html>
<head>
<script type="text/javascript">

    // set a global var to acces the elements in the HTML document
    var doc = this;

    function testIt()
    {
        doc.blaat.innerHTML = 'It works!!';
    }
</script>
</head>
<body>
    <div id="blaat">Will this ever work..?!</div>
    <button onclick="testIt()">Click me and you'll see!</button>
</body>
</html>

As my first impression when I got to 'getElemenyById()' was that it sounds like a function that will iterate through the DOM's element list until it finds the element you need; this must take some time. With the above example, you simply access the element directly. I'm not sure if I'm really saving CPU / adding speed this way, but at least it feels that way :)

Improve this answer

1 Comment

The user want to reach elements without ID pointing. Your solution is like the getElementById function because you need to know the id. Futhermore, you should use getElementById instead of your solution. In summary, out of scope.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.