Next Q for Simply JavaScript Page 79

Community
1

I get to this statement

 var elementArray = Core.getElementsByClass("dataTable");

on page 79, so I decide to test it now that I am getting the swing of what’s going on so far…

My Html is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trial 2</title>
<!-- <link type="text/css" href="look.css" rel="stylesheet" /> -->
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="libs.js"></script>
</head>
<body>
<h1>Hello Alert</h1>
<p>
In this cinema masterpiece,
<a id="berenger" href="/name/nm0000297/">Tom Berenger</a> plays
a US soldier working in the Panamanian jungle.
</p>
	<ul>
		<li>
		paragraph
		</li>
		<li>
		unordered list
		</li>
	</ul>
	<p>
	There are 2 children of html:
	</p>
	<ul id="apple">
		<li class="secondList">
		head
		</li>
		<li class="secondList">
		body
		</li>
	</ul>
</body>
</html>

my libs.js working just under core.js is:

var coreConnection =
{
	init: function() 
	{
		var listItems = document.getElementById("apple");
		alert(listItems.nodeName); // test alert
		var elementArray = Core.getElementsByClass("secondList");
		var firstItem = elementArray[0];
		var secondItem = elementArray[1];
		alert(firstItem);
		alert(secondItem);
	}
};
Core.start(coreConnection);

Ok, this works, but I get this alert for the firstItem or second Item of the secondList classes: instead of alerting “head” or “body” as shown fromt that list, I get an alert that says [object HTMLLIElement]. Ok, I see that it is in the right place and all. But I thought it was suppose to give me what was inside the element, not the nodeName or ObjectName or whatever. How do I fix my code so that is says the string that is in the li tag?

Thanks ahead of time
James

2

Ok, this works, but I get this alert for the firstItem or second Item of the secondList classes: instead of alerting “head” or “body” as shown fromt that list, I get an alert that says [object HTMLLIElement].

Yup, you’re returning an HTML node. There’s a great diagram somewhere showing how text inside an element, as well as its attributes like classes and id’s, are all separate chunks (nodes).

Ok, I see that it is in the right place and all. But I thought it was suppose to give me what was inside the element, not the nodeName or ObjectName or whatever.

Nope.

How do I fix my code so that is says the string that is in the li tag?


		alert(firstItem.firstChild.nodeValue);
		alert(secondItem.childNodes[0].nodeValue);

I think.

So the li is the element you’ve assigned the name “firstItem”. But that’s the li, not anything in it or attached t it.

When you did
alert(listItems.nodeName); // test alert
You were told UL, which is the name of that HTMLElement (listItems).

When you listed all those elements in an array, you still only got exactly those elements. So now you have to Walk the DOM to get to the text nodes inside.

So the li (any element) has childNodes in it. If it’s an empty element, it should have no childNodes but if there’s a single space inside it, the modern browsers may well consider that a “text node” (IE doesn’t, and frankly I like the way IE does this).

Grabbing the child node still isn’t enough. If you grabbed the first child node of your li’s (which would be the text) with
alert(firstItem.firstChild); (firstChild is just a shortcut to childNodes[0]), the browser should say something like TextNode or something.
To actually display the text you have to say WHAT of that childNode/firstChild you want. For non-form elements, that should be the nodeValue.

For form elements, it should be just .value.

I use the book The Javascript Anthology (a really really old copy) for more explanation and examples of this DOM stuff. Beyond that, duckduckgo (or google I s’pose) are good once you know the names of the things you’re looking for.

So I could look up “get value of text node javascript” because I knew those were called text nodes.

3

Ah, Got it working.

Thank you.