Solved

netscape sees DOM tree different from IE

Posted on 2003-11-11
5
593 Views
Last Modified: 2013-11-19
I have a page that has a form that has a value that I need to read. Using DOM, I am able to traverse to the node and retrieve the value in Netscape only. Here is the code:

var howMany = document.forms["vw-form"].lastChild.previousSibling.firstChild.nextSibling.nextSibling.getAttribute("value");

That retrieves the second <input> after the <form>

Here is the code snippet of what it is looking at:

<form name=vw-form method=post action="http://order.store.yahoo.com/cgi-bin/wg-order?unique=1b8f4&catalog=gpsexplorer&et=3fb1bffc&basket=5Ccfe188d8011db33fb1b8d774d9dd2e188d88771384443a365f21eb09f06deef">
<input type=hidden name=vwcatalog value=gpsexplorer>
<input type=hidden name=vwnitems value=3>
<input type=hidden name=vwtotal value=774.85>
<input type=hidden name=basket value=5Ccfe188d8011db33fb1b8d774d9dd2e188d88771384443a365f21eb09f06deef>
<input type=hidden name=et value=3fb33f94>
<input type=hidden name=vwentropy value=1068611828>


<table width="100%" border=0 bgcolor=ffffff cellpadding=10 cellspacing=0><tr><td><font size=2 face=arial color=000000></font></td></tr><tr><td><font size=2 face=arial color=000000><table cellpadding=0 cellspacing=0 border=0 width="100%" bgcolor=CECFCE>
<tr><td><font size=2 face=arial color=000000><table cellpadding=6 cellspacing=1 border=0 width="100%">
<tr bgcolor=cecfce><td colspan=4><font size=2 face=arial color=000000><b>Your Shopping Cart</b></font></font></td></tr>
<tr bgcolor=eeeeee><td align=center nowrap width="43%"><font size=2 ......


and it goes on from there. I am getting the error "Object Required" from IE. Any ideas?


0
Comment
Question by:dontera
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 

Author Comment

by:dontera
ID: 9729026
I have found a solution, but it is ugly. Does anyone have a better way?

if (document.all){
var howMany = document.getElementsByTagName("form")[1].firstChild.nextSibling.nextSibling.getAttribute("value");
}
else {
var howMany = document.forms["vw-form"].lastChild.previousSibling.firstChild.nextSibling.nextSibling.getAttribute("value");
0
 
LVL 11

Accepted Solution

by:
Zontar earned 80 total points
ID: 9729053
This is because Netscape includes whitespace and linefeeds in the source code as textNodes. MSIE ignores them. (According to the specs, Netscape is doing it correctly, sorry. ;) )

There are two possible solutions:

1. Test the node type before using the node. (This can become very tedious very quickly.)

2. Avoid the node-related methods where possible and use element-related ones instead.

var howMany = document.getElementsByName("vw-form")[0].getElementsByTagName("input")[1].getAttribute("value");

This will return the value in the vwnitems field. (That *is* the one you wanted, right...?)

However, there's nothing wrong with using the old-fashioned form element references with forms, either:

var howMany = document.forms["vw-form"].vwnitems.value;

A couple of tips that will make scripting much simpler:

1. Give each element you want to work with a unique id. Then you can access it directly with the document.getElementById() method.

2. Don't use any special characters except the underscore in name or id attributes. (Note -- HTML lets you use practically any characters in name attributes, but only letters, digits, and the underscore are legal in id attributes.) Case in point -- because you have a dash in "vw-form", you must use

var howMany = document.forms["vw-form"].vwnitems.value;

because "vw-form" isn't a legal JavaScript identifier. If you'd named it "vw_form" or "vwform" you could have just used

var howMany = document.vw_form.vwnitems.value;

or

var howMany = document.vwform.vwnitems.value;

and saved a little more typing.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9733202
Hi,

  I agree with Zontar in that you should never use a hyphen within a variable/attribute name.

  You could also always simply loop through form and identify the element you are looking for (after changing the form name to 'vwForm':

formObj = document.vwForm;
for (var i = 0; i < formObj.length; i++)
{
  el = formObj.elements[i];
  if (el.name == "vwnitems")  howMany = el.value;
}

or, if you know which element you are searching for:

howMany = formObj.elements[1].value;

remember: javascript begins counting with 0, so the second element has an index of 1

Vinny
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9733907
If you do want or need to use node/sibling references, you can do stuff like this:

HTML:

<h1 id="myH1"></h1>

<div></div>

<!-- comment ... in DOM, a CommentNode object -->
<p></p>

<!-- etc. ... -->

JS:

var h1 = document.getElementById("myH1");
var p = h1;

while(p.nodeName.toLowerCase() != "p") //  keep checking the next node until you find the p element node
  p = p.nextSibling;                                  //  use toLowerCase() for compatibility with both HTML and XHTML doctypes...

//  do stuff with p...


nodeName values:
--------------------
text node -->> #text
comment node -->> #comment
element node -->> same as tagName
0
 

Author Comment

by:dontera
ID: 9736320
Thank you very much for the advice all. One thing I should have noted, I cannot change the form code at all (it is produced by Yahoo's shopping cart cgi which, for obvious reasons, is safely tucked away). IF they have only not included teh hyphen all of this would have been Much easier..

Thanks again..
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
recommended CMS for the website revamp 3 99
how to extract window origin in spring 2 78
Using YubiKey with REST API application 2 135
Stupid git question 2 112
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question