Parsing List Nodes

J

Joe Cox

I appologize for the novice question. I believe in am using standard ECMA.
Can someone explain to me why the following script works in IE but does not
work in Firefox, Mozila, or Opera?

++++++++++++++++++++++++++++++++++
<html>
<head>
</head>
<body>
<ul id="myUL">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<script type="text/javascript">
var ulist = document.getElementById("myUL");
alert ("childNodes[0].tagName: " +
document.getElementById("myUL").childNodes[0].tagName + "\n" +
"childNodes[0].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[0].firstChild.nodeValue + "\n" +
"childNodes[1].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[1].firstChild.nodeValue + "\n" +
"childNodes[2].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[2].firstChild.nodeValue + "\n" +
"childNodes[3].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[3].firstChild.nodeValue + "\n" +
"childNodes[4].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[4].firstChild.nodeValue + "\n" +
"childNodes[5].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[5].firstChild.nodeValue);
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Firefox says document.getElementById("myUL").childNodes[0].firstChild 'has
no properties'.

Then I tried the following script:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<html>
<head>
</head>
<body>
<ul id="myUL">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<script type="text/javascript">
var ulist = document.getElementById("myUL");
alert ("nodeType " + document.getElementById("myUL").nodeType + "\n" +
"tagName " + document.getElementById("myUL").tagName + "\n" +
"length " + document.getElementById("myUL").length + "\n" +
"innerHTML \n" + document.getElementById("myUL").innerHTML + "\n" +
"childNodes[0].tagName " +
document.getElementById("myUL").childNodes[0].tagName + "\n");
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++

The output from that was:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
nodeType 1
tagName UL
length undefined
innerHTML
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
<LI>List Item 4</LI>
<LI>List Item 5</LI>
<LI>List Item 6</LI>
childNodes[0].tagName undefined
+++++++++++++++++++++++++++++++++++++++++++++++++++++

Why is childNodes[0] undefined?

Thanks in advance,
Joe Cox
 
J

Joe Cox

Disregard the variable definition 'var ulist =
document.getElementById("myUL");'
That was part of another test.

Joe Cox said:
I appologize for the novice question. I believe in am using standard ECMA.
Can someone explain to me why the following script works in IE but does not
work in Firefox, Mozila, or Opera?

++++++++++++++++++++++++++++++++++
<html>
<head>
</head>
<body>
<ul id="myUL">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<script type="text/javascript">
var ulist = document.getElementById("myUL");
alert ("childNodes[0].tagName: " +
document.getElementById("myUL").childNodes[0].tagName + "\n" +
"childNodes[0].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[0].firstChild.nodeValue + "\n"
+
"childNodes[1].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[1].firstChild.nodeValue + "\n"
+
"childNodes[2].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[2].firstChild.nodeValue + "\n"
+
"childNodes[3].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[3].firstChild.nodeValue + "\n"
+
"childNodes[4].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[4].firstChild.nodeValue + "\n"
+
"childNodes[5].firstChild.nodeValue: " +
document.getElementById("myUL").childNodes[5].firstChild.nodeValue);
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Firefox says document.getElementById("myUL").childNodes[0].firstChild 'has
no properties'.

Then I tried the following script:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<html>
<head>
</head>
<body>
<ul id="myUL">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<script type="text/javascript">
var ulist = document.getElementById("myUL");
alert ("nodeType " + document.getElementById("myUL").nodeType + "\n" +
"tagName " + document.getElementById("myUL").tagName + "\n" +
"length " + document.getElementById("myUL").length + "\n" +
"innerHTML \n" + document.getElementById("myUL").innerHTML + "\n" +
"childNodes[0].tagName " +
document.getElementById("myUL").childNodes[0].tagName + "\n");
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++

The output from that was:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
nodeType 1
tagName UL
length undefined
innerHTML
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
<LI>List Item 4</LI>
<LI>List Item 5</LI>
<LI>List Item 6</LI>
childNodes[0].tagName undefined
+++++++++++++++++++++++++++++++++++++++++++++++++++++

Why is childNodes[0] undefined?

Thanks in advance,
Joe Cox
Click to expand...
 
M

Martin Honnen

Joe said:
I appologize for the novice question. I believe in am using standard ECMA.
Can someone explain to me why the following script works in IE but does not
work in Firefox, Mozila, or Opera?
Click to expand...
<ul id="myUL">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<script type="text/javascript">
var ulist = document.getElementById("myUL");
alert ("childNodes[0].tagName: " +
document.getElementById("myUL").childNodes[0].tagName + "\n" +
"childNodes[0].firstChild.nodeValue: " +
Click to expand...

The difference is how whitespace in the original source is modelled in
the DOM, Mozilla and Opera include whitespace as text nodes in the DOM
while IE in its HTML DOM does not meaning that childNodes[0] in IE for
instance is an element node while in Mozilla it is a text node.
So don't use the childNodes collection if you are only interested in
element nodes, unless you check which nodeType you have. Often it is
easier to use e.g. getElementsByTagName('li') on the container element.
 
J

Joe Cox

This had been bugging me for days. Thanks for the quick and clear
explanation.


Martin Honnen said:
Joe said:
I appologize for the novice question. I believe in am using standard
ECMA. Can someone explain to me why the following script works in IE but
does not work in Firefox, Mozila, or Opera?
Click to expand...
<ul id="myUL">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<script type="text/javascript">
var ulist = document.getElementById("myUL");
alert ("childNodes[0].tagName: " +
document.getElementById("myUL").childNodes[0].tagName + "\n" +
"childNodes[0].firstChild.nodeValue: " +
Click to expand...

The difference is how whitespace in the original source is modelled in the
DOM, Mozilla and Opera include whitespace as text nodes in the DOM while
IE in its HTML DOM does not meaning that childNodes[0] in IE for instance
is an element node while in Mozilla it is a text node.
So don't use the childNodes collection if you are only interested in
element nodes, unless you check which nodeType you have. Often it is
easier to use e.g. getElementsByTagName('li') on the container element.
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Song requests 4
Working on mobile css menu with plenty of frustration! 2
Not sure why drop-down is not working. 2
I need help fixing my website 2
Only one table shows up with the information 2
Align separate li to right 2
Bootstrap Tree View doesnt search properly. I am searching for 954116679 (FSP) but it returns 0 matches found 2
JavaScript code not working!! 6

Members online

No members online now.
Total: 221 (members: 0, guests: 221)
Robots: 269

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top