Parsing List Nodes - Javascript

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

Jul 23 '05 #1

Subscribe Post Reply

1761

Joe Cox

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

"Joe Cox" <jc**@kornet.net> wrote in message
news:db**********@news2.kornet.net...

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

Jul 23 '05 #2

Martin Honnen

Joe Cox wrote:

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? <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: " +

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.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #3

Joe Cox

This had been bugging me for days. Thanks for the quick and clear
explanation.
"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:42***********************@newsread4.arcor-online.net...

Joe Cox wrote:
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?

<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: " +

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.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #4

Duncan Booth

Joe Cox wrote:

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?

Try cutting your script down a bit and it should all become obvious:

<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]);
</script>
</body>
</html>

Mozilla puts a text node for the whitespace between the <ul> and the <li>
tags. IE throws away the text nodes.

Jul 23 '05 #5

Similar topics

303

BIG successes of Lisp (was ...)

by: mike420 | last post by:

In the context of LATEX, some Pythonista asked what the big successes of Lisp were. I think there were at least three *big* successes. a. orbitz.com web site uses Lisp for algorithms, etc. b....

Python

Parsing with unqualified Namespace

by: Erik Moore | last post by:

I am both producing and parsing an xml document that needs to be validated against a schema. I wanted some consumers of the document to have the option of not performing a validation, so I left the...

.NET Framework

XML parsing in C#

by: Venkat Chellam | last post by:

I have a XML file like as follow <?xml version="1.0" encoding="UTF-8"?> <NeuStarLSRReport> <NeuStarHeader fromDate="09/10/04" toDate="09/13/04" RequestsReceived ="43" ResponsesSent="50">...

.NET Framework

need to remove root element when parsing xml doc or storing in database

by: fizzy | last post by:

i am fetching an xml document with the following structure: <?xml version="1.0" encoding="UTF-8"?> <DTCResponse xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...

.NET Framework

question about XML parsing

by: ateale | last post by:

Hey Guys, I am discovering the awesomeness that is XML. I use an application called Final Cut Pro for editing video. The app is able to export is projects as XML. I am trying to develop a...

Python

Parsing and Displaying XML Document

by: nicky123 | last post by:

Hi everyone, This is a brief description that I have provided for parsing & displaying an XML document using DOM API. Please feel free to post your own comments & views regarding...

XML

RE: python screen scraping/parsing

by: bruce | last post by:

Hi Paul... Thanks for the reply. Came to the same conclusion a few minutes before I saw your email. Another question: tr=d.xpath(foo) gets me an array of nodes.

Python

Process List / Module List problem..

by: dogatemycomputer | last post by:

I'm new to C#. I am using the following C# method to populate a TreeView control. If you call this method once during the life of form then it works perfectly. If you call the method a second...

C# / C Sharp

In .xml parsing how to skip subnodes and move to next node usingXmlTextReader

by: raghudr | last post by:

Hi all, I am parsing a .xml file.My main intention is to retrieve the name value of node "Signal":- "Name Value" which is "rag". i want to store only the <signal"name value" that is only...

C# / C Sharp

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++