We help IT Professionals succeed at work.

why won't childNode work?

CoreNeter asked
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?
Watch Question

Expert of the Year 2008
Top Expert 2008

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



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?
Expert of the Year 2008
Top Expert 2008

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?
Expert of the Year 2008
Top Expert 2008

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


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

Expert of the Year 2008
Top Expert 2008
>>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]!!"


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 "

Explore More ContentExplore courses, solutions, and other research materials related to this topic.