why won't childNode work?

var bfc = doc.getElementById("xtesigsvg");
var boxSelect = bfc .getElementById("test0").parentNode

So this works


but this doesn't
and it gives me  Error: 'childNodes.0' is null or not an object

any idea what could be wrong?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Are you sure about that? On which browser is this ocurring? I think the code below reflects the markup/structure you are describing, but works OK for me on IE.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript"><!--
function report()
	var x = document.getElementById("b");
	var y = x.parentNode;
<div id="a">
	<div id="b"></div>
	<div id="c"></div>
	<div id="d"></div>
<a href="#" onclick="report()">Report</a>

Open in new window

CoreNeterAuthor Commented:

I'm using IE 6.0.379 and your example worked fine.

The only difference between my case and your example is that i'm dealing with Scalable Vector Graphics, do you think that could be part of the issue?
As long as your document is well formed and you have valid references to the nodes the DOM functions should have no problem. Can you post your code?
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Your problem seems to be related to "blank/empty" text nodes. ON the attached code you will find:
<g id="group">
 <rect />

Different browsers will construct a DOM representation for <g> with more than one child! Even though there is only one element, the "newlines" are inserted as a text node. So childNodes[0] would be a textnode and the childNode[1] would be the <rect> element.

Save the file below and open it in Firefox so you see the #text node.

FYI: if the nodeType ==1, it is an element node and thus it can have attributes.
text nodes are nodeType==3 and cannot have attributes (at least not as of now).
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="300" height="300">
	<script type="text/ecmascript">
		function showRectColor() {
		function showRectArea(evt) {
			var width = parseFloat(evt.target.getAttributeNS(null,"width"));
			var height = parseFloat(evt.target.getAttributeNS(null,"height"));
			alert("The rectangle area is: " + (width * height));
		function showRootChildrenNr() {
			alert("Nr of Children: "+document.documentElement.childNodes.length);
		function report()
			var r = document.getElementById("myBlueRect");
			var p = r.parentNode;
			alert(p.childNodes[0].nodeName + " " + p.childNodes[0].nodeType);
			alert(p.childNodes[1].nodeName + " " + p.childNodes[1].nodeType);
	<g id="firstGroup">
		<rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="showRectArea(evt); report();"/>
		<text x="40" y="100" font-size="12px" onclick="showRectColor()">Click on this text to show rectangle color.</text>
		<text x="40" y="130" font-size="12px">Click on rectangle to show rectangle area.</text>
		<text x="40" y="160" onclick="showRootChildrenNr()" font-size="12px">Click on this text to show the number of child<tspan x="40" dy="20">elements of the root element.</tspan></text>

Open in new window

CoreNeterAuthor Commented:
unfortunately that's not up to me, besides even if I could, it's quite alot of code :/
I wanted to test using selectNodes see if same thing happens but wasn't sure of syntax.

var bfc = doc.getElementById("xtesigsvg");
var boxSelect = bfc.selectNodes("starts-with('id', 'test')")
i'm trying to find all nodes that have the id which starts with test.

is that the best way to find the nodes? I want to test this way and see if childNodes gives the same problem.
thanks hielo, as always

>>unfortunately that's not up to me
I'm don't know what you meant by "that". I just provided you with some example code, which when run in FF you will find that <g> contains more than one NODE. I was not suggesting you to change anything on your code. I just wanted you to "experiment" with the example I provided.

>>I wanted to test using selectNodes see if same thing happens but wasn't sure of syntax.
FYI: the selectNodes is a Microsoft XMLDOM method only (http://www.w3schools.com/xpath/xpath_examples.asp), but basically the syntax you are after is:


However, if you look at the link I provided above, you will notice that they are applying the selectNodes on an XML Document object that is loaded/imported into the current document. In your case, it seems you are trying to do everything within the same document. I'm not sure if you will be able to do everything from one document. At least for the purposes of experimenting, you may have to create some "test" file that imports your svg file.

IMPORTANT: If you look at the link above, under the section titled "Select the First book Node", you will find the following:
"... IE5 and later has implemented that [0] should be the first node, but according to the W3C standard it should have been [1]!!"

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CoreNeterAuthor Commented:
Great hielo! this is everything I needed to get it working.
Thanks alot

btw "unfortunately that's not up to me" was referencing your question "Can you post your code?"
When I posted that response I had not seen your post in between which starts with "Your problem seems to be related "
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.