hs********@yahoo.com wrote:
1st off thanks for such a thurouh response.
RobG wrote:
hs********@yahoo.com wrote:
so i have a <ul> and I allow the user to append items to it. The
problem is that on mozilla the <span class="line"> which is just a
[...] You should use feature detection and not assume every browser
supports a particular method. Maybe you also want to support older
browsers with document.all too:
this covers all browsers?
If by 'this' you mean document.all, no. But between document.all and
getElementsById you should cover everything except Netscape 4 and may
be 6. Pretty much any browser that supports JavaScript and is less
than 5 years old will support one or the other or both.
[...] You should be more careful and test that nodes exist before trying
to
use them in expressions, as if they don't exist your script will
error and exit. Different browsers insert extra nodes in some
places, you can't be certain that any particular node will have a
firstChild.
no doubt, i had this problem with the extra nodes being inserted. the
<ul> had two <li>'s
but ul.children.length was 5. what is the browser inserting and why? I
believe it was on mozilla
The DOM specifications say where elements should be inserted and
whether or not other elements should follow them. In short, IE and
Mozilla (et al) behave differently so never assume that if you do not
explicitly code any children that there won't be any.
Mozilla (and Firefox and Netscape) have a DOM inspector that is very
useful for seeing where the elements are in the DOM. Below is some
code I wrote some time ago to provide a DOM report for IE - try it
and see the differences between browsers (there is a bit of wrapping
that you'll need to fix).
I should probably re-write it to be much more efficient, but hey...
[...] As above, use an onclick event, not javascript pseudo-protocol.
Have
the href go somewhere useful for non-JavaScript browsers and return
false to cancel it if your onclick exits successfully.
thats a better idea, but is their anything in particular that bad about
javascript:.....
other than browsers that are js-less faultering?
JS-less browsers will just do nothing. The javascript: label needed
if you've used some other scripting language higher in the page (say
VBscript with IE) but that is extremely rare. It is just one more
thing that can go wrong and is not needed.
[...]
interesting, thanks for the heads up. I dont have much experience
manipulating te DOM and having to do so for multiple browsers. You have
given me a little more insight, thanks.
It's also good to trim unnecessary quotes from replies - keeps 'em
shorter. DOMwalk below.
/* DOM Walk
* Description: Reports on nodes encountered in an HTML page.
* Starts at the provided start point, reports only
* for branch requested. If no start point given,
* will do entire document.
* Call: displayReport(<window_name>,reportDOM(<doc_referen ce>));">
* e.g. displayReport('A
Report',reportDOM(document.getElementById('aDiv')) ;
*/
// adds 1 to last number of index
// e.g. 1,1,2 becomes 1,1,3
function indexAdd(indexVal) {
var a = indexVal.split(',');
var c = '';
for (var i=0; i<a.length; ++i) {
var b = parseInt(a[i]);
if ( i == (a.length - 1)) {++b}
if ( c == '') {c = String(b);
} else {c += ',' + String(b);
} }
return c;
}
// indexTrim
// trims last value from index
// e.g. 1,0,1 becomes 1,0
function indexTrim(indexVal) {
var x = indexVal.split(',');
var z = x[0];
for (var i=1; i<x.length - 1; ++i){
z += ',' + x[i];
} return z;
}
// Navigates a DOM
// Walks down firstChild until the end, then
// retreats to the first nextSibling up the
// tree until it gets back to the start and
// there are not more nextSiblings
function reportDOM(startPoint) {
var idx = '0';
var keepGoing = 'yes';
var msg = '';
if (arguments.length == 0) startPoint = window.document;
if (startPoint) {
var thePoint = startPoint;
var count = 0;
msg = printDetail(count,idx,thePoint,msg);
} else {
alert('startPoint not valid');
keepGoing = 'no';
}
// Keep doing this till I say stop...
while (keepGoing == 'yes') {
// if there are kids
if (thePoint.firstChild) {
thePoint = thePoint.firstChild;
idx += ',' + 0;
++count;
msg = printDetail(count,idx,thePoint,msg);
// Not gone into kid loop, if there are sibs, do them instead
} else if (thePoint.nextSibling) {
thePoint = thePoint.nextSibling;
idx = indexAdd(idx);
++count;
msg = printDetail(count,idx,thePoint,msg);
} else {
// If no kids or sibs, retreat up the tree until find
// a nextSibling. If get to the top without findng one,
// or if keepGoing has been set to no, we've finished
while (!thePoint.nextSibling && keepGoing == 'yes') {
thePoint = thePoint.parentNode;
idx = indexTrim(idx);
// If going up the tree put is back to the top, that's it.
if (idx == '0') keepGoing = 'no';
}
// Have to test here as 'while' not evaluated yet - if
// thePoint.nextSibling undefined ('cos we're at the top)
// script will crash
if (keepGoing == 'yes') {
thePoint = thePoint.nextSibling;
idx = indexAdd(idx);
++count;
msg = printDetail(count,idx,thePoint,msg);
} } }
return msg;
}
// printDetail
// Writes details of the point passed to it
// as HTML. Expects output to be put in a table
function printDetail(c,x,p,m){
m += '<tr><td class=\"count\">' + c + '</td>'
+ '<td class=\"idx\">' + x + '</td>'
+ '<td><span class=\"kind\">' + p.nodeName
if (p.type) {m += ' ' + p.type}
m += '</span></td>'
+ '<td><span class=\"name\">';
if (p.name) {m += p.name;}
if (p.id && p.name) {m += '/' + p.id;}
if (p.id && !p.name) {m += p.id;}
// else {m += ' '}
m += '</span></td>'
+ '<td align=\"center\"><span class=\"type\">' + p.nodeType +
'</span></td>'
+ '<td align=\"center\"><span class=\"kids\">' +
p.childNodes.length + '</span></td></tr>';
return m;
}
// displayReport
// Opens a new window and writes the data to it
// thingName is a name of the thing being reported on
// content is the stuff to write
function displayReport(thingName,content) {
repWindow = window.open('','result','width=550,height=700,menu bar=0'
+ ',toolbar=1'
+ ',status=0'
+ ',scrollbars=1'
+ ',resizable=1');
// Styles
repWindow.document.writeln(
'<html><head><title>Report for: '
+ thingName
+ '</title>'
+ '<style type=\"text/css\">'
+ '.plain, .count, .idx, .kind, .name, .type, .kids, .legend'
+ '{font-weight: normal; font-family: sans-serif; '
+ ' font-size: 12px; color: \#333333;} '
+ 'th' + '{border-bottom: 1px solid \#999999;}'
+ 'td' + '{border-bottom: 1px solid \#999999;}'
+ '.count' + '{padding-right: 15; text-align: right;}'
+ '.idx' + '{padding-right: 10;}'
+ '.name' + '{padding-left: 5;}'
+ '</style>' + '</head><body onLoad=\"self.focus()\">'
+ '<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\"'
+ ' width=\"100\%\"><tr><td style=\"border-bottom: none;\">'
+ '<h2><span class=\"plain\">DOM Walk Report on:</span> '
+ thingName + '</h2>'
+ '</td><td style=\"padding: 0 20 0 0; text-align: right;'
+ ' border-bottom: none;\">'
+ '<a href=\"#NTlegend\">Node Type Legend</a> | '
+ '<a href=\"javascript
:window.close();\">Close</a></td>'
+ '</tr></table>'
+ '<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\">'
+ '<tr><th>\#</th>'
+ '<th align=\"left\">Index</th>'
+ '<th align=\"left\">Kind</th>'
+ '<th align=\"left\">Name/id</th>'
+ '<th align=\"center\">Node Type</th>'
+ '<th align=\"center\">\# Kids</th></tr>'
+ content
+ '</table><br>'
+ '<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\">'
+ '<tr><th colspan=\"2" align=\"left\">'
+ '<a name=\"NTlegend\">Node Type Legend</a></th></tr>'
+ '<tr><td class="count">1</td><td '
+ 'class="legend">ELEMENT_NODE</td></tr>'
+ '<tr><td class="count">2</td><td '
+ 'class="legend">ATTRIBUTE_NODE</td></tr>'
+ '<tr><td class="count">3</td><td '
+ 'class="legend">TEXT_NODE</td></tr>'
+ '<tr><td class="count">4</td><td '
+ 'class="legend">CDATA_SECTION_NODE</td></tr>'
+ '<tr><td class="count">5</td><td '
+ 'class="legend">ENTITY_REFERENCE_NODE</td></tr>'
+ '<tr><td class="count">6</td><td '
+ 'class="legend">ENTITY_NODE</td></tr>'
+ '<tr><td class="count">7</td><td '
+ 'class="legend">PROCESSING_INSTRUCTION_NODE</td></tr>'
+ '<tr><td class="count">8</td><td '
+ 'class="legend">COMMENT_NODE</td></tr>'
+ '<tr><td class="count">9</td><td '
+ 'class="legend">DOCUMENT_NODE</td></tr>'
+ '<tr><td class="count">10</td><td '
+ 'class="legend">DOCUMENT_TYPE_NODE</td></tr>'
+ '<tr><td class="count">11</td><td '
+ 'class="legend">DOCUMENT_FRAGMENT_NODE</td></tr>'
+ '<tr><td class="count">12</td><td '
+ 'class="legend">NOTATION_NODE</td></tr>'
+ '</table><br>'
+ '<div style=\"padding: 0 20 0 0; text-align: right;\">'
+ '<a href=\"\" '
+ 'onclick=\"javascript
:window.close();\">Close</a></div>'
+ '</body></html>'
);
repWindow.document.close();
}
--
Rob