CODEWITHSUNDEEP
javascriptdom
Nicholas Ritson
Nicholas Ritson

Reputation: 909

Javascript Targeting Child Elements in a ID

i'm currently learning javascript and had a question. I am trying to target only the h1 tag in the div id=title i tried a few ways using this as a reference site amongst others: http://www.ibm.com/developerworks/library/wa-jsanddom-pr/sidefile1.html

but nothing seems to be working, i get back the value "undefined" esentially what i want to do is only target the h1 and change the text to something else. how do i do that? is this along the right path or is there a different way to do it?

<div id="title">
    <h1>Javascript Lesson 1</h1>
    <p>The basics</p>
</div>

<script>
var title = document.getElementById('title');
    var titleHeading = title.firstChild;
    console.log (title.value);
</script>

any help is greatly appreciated. Thanks.

Upvotes: 5

Views: 20854

Answers (4)

Derek Dunnom
Derek Dunnom

Reputation: 39

You can get a collection of children back with Document.querySelectorAll(). Here are two examples:

var matches = document.querySelectorAll("iframe[data-src]");
var matches = document.querySelectorAll("div.note, div.alert");

As you can see, it is nearly JQuery like. Notice the comma in the second example. JQuery would use a space there. These examples were taken from developer.mozilla.org.

If you don't want a collection, (if you want a single element) document.querySelector("#myCSSSelector"); is what you want.

Upvotes: 0

Nisse Engstr&#246;m
Nisse Engstr&#246;m

Reputation: 4751

The first child of the <div> (in your example) is a text node. Text nodes don't have a value property. Even if you remove the whitespace between the <div> and the <h1> to make it the first child node, the <h1> still doesn't have a value property. What it does have is a child text node with the node value "Javascript Lesson 1".

What you want is to retrieve a reference to that text node, and its value. There are different ways to do this. For instance:

<div id="title">
  <h1>Javascript Lesson 1</h1> <!-- White space before <h1> -->
  <p>The basics</p>
</div>

<script>
  var title = document.getElementById('title');
  var titleHeading = title.childNodes[1];
  console.log (titleHeading.firstChild.nodeValue);
</script>

or:

<div id="title"
 ><h1>Javascript Lesson 1</h1> <!-- No white space -->
  <p>The basics</p>
</div>

<script>
  var title = document.getElementById('title');
  var titleHeading = title.firstChild;
  console.log (titleHeading.firstChild);
</script>

or:

<div id="title">
  <h1>Javascript Lesson 1</h1>
  <p>The basics</p>
</div>

<script>
  var title = document.getElementById('title');
  var titleHeading = title.getElementsByTagName('h1')[0];
  console.log (titleHeading.innerHTML);
</script>

or some permutation of the above.

Upvotes: 0

James Hill
James Hill

Reputation: 61842

Take a look at Element.getElementsByTagName.

var titleElement = document.getElementById("title");
var titleChildren = titleElement.getElementsByTagName("H1");

// Do something with children.
// In your example code, you'll only have one element returned
console.log(titleChildren[0].innerHTML);

// To change the text, simply access the innerHTML property
titleChildren[0].innerHTML = "[New Value]"

Here's a working fiddle to play with.

Upvotes: 7

BeaumontTaz
BeaumontTaz

Reputation: 273

If you know that the h1 you want to modify will always be the first h1 child you could do something like this:

<script>
document.getElementById('title').getElementsByTagName("h1")[0].innerHTML = "New Name";
</script>

Upvotes: 2

Related Questions