• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 627
  • Last Modified:

why won't childNode work?

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

So this works

alert(boxSelect.firstChild.getAttribute("id"));

but this doesn't
alert(boxSelect.childNodes[0].getAttribute("id"));
and it gives me  Error: 'childNodes.0' is null or not an object

any idea what could be wrong?
0
CoreNeter
Asked:
CoreNeter
  • 4
  • 3
1 Solution
 
hieloCommented:
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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"><!--
function report()
{
	var x = document.getElementById("b");
	var y = x.parentNode;
	alert(y.firstChild.getAttribute("id"));
	alert(y.childNodes[0].getAttribute("id"));
}
//--></script>
</head>
<body>
<div id="a">
	<div id="b"></div>
	<div id="c"></div>
	<div id="d"></div>
</div>
<a href="#" onclick="report()">Report</a>
</body>
</html>

Open in new window

0
 
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?
0
 
hieloCommented:
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?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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

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"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="300" height="300">
	<script type="text/ecmascript">
	<![CDATA[
		function showRectColor() {
			alert(document.getElementById("myBlueRect").getAttributeNS(null,"fill"));
		}
		
		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);
			alert(p.firstChild.nextSibling.getAttribute("id"));
		}
	]]>
	</script>
	<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>
	</g>
</svg>

Open in new window

0
 
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


0
 
hieloCommented:
>>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:

xmlDoc.selectNodes("/svg/g/rect[@id='test']");

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]!!"
0
 
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 "
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now