Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Getting Parent, Child and Sibling References

Getting Parent, Child and Sibling References.

This section will illustrate how to make references to children, parents and siblings

<?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="100">
<script type="text/ecmascript"><![CDATA[
function showContentAndRelatives(evt) {
//get reference to text element
var textElement = document.getElementById("myText");
//get reference to parent of element
var parent = textElement.parentNode;
alert("the parent node has id '"+parent.getAttributeNS(null,'id')
+"' Nodename is '"
+parent.nodeName+"'");
//get a reference to the first child of the element "myText"
var child = textElement.firstChild;
//loop over all childs
while (child != null) {
//see if child is a tspan and has child nodes
if (child.nodeName == "tspan" && child.hasChildNodes()) {
//see if firstChild is of nodeType "text"
if (child.firstChild.nodeType == 3) {
alert("child's text content="+child.firstChild.nodeValue);
}
}
child = child.nextSibling;
}
alert("the content of the second tspan Child is:
"+textElement.childNodes.item(1).firstChild.nodeValue);
}
]]></script>
<g id="firstGroup">
<text id="myText" x="50" y="30" onclick="showContentAndRelatives(evt)">
<tspan>Click on text</tspan>
<tspan x="50" dy="15">to get parent node data</tspan>
<tspan x="50" dy="15">and to see the text node values </tspan>
<tspan x="50" dy="15">of each line</tspan>
</text>
</g>
</svg>

Link to example 5 (parent_child_sibling_references.svg) – in a separate window)

In this example the property element.parentNode to get a reference to the parent node of an element is demonstrated. The id and nodename of the parent are alerted to prove that there is access to the parent node.

Next the use of the element.firstChild property is shown, which gives a reference to the first child of an element. Using that reference, a loop over all children of the text node is made until the child reference returns a null value. At the end of the loop, the property child.nextSibling returns the node reference to the next sibling of the child element. Within the loop it is tested whether the child.nodeName property returns “tspan” and if the child has children at all (using the child.hasChildNodes property). This is necessary because theoretically there could be other children as well. Specifically one also gets references to whitespaces (such as line feeds or blanks) between elements. Within that test it is tested if the child is of nodeType “3” which is a text node, in this case the content of the <tspan/> element.

Following is a table of nodeTypes with their corresponding nodeTypeString in XML:

1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE

In the final alert() the use of accessing the nth child of an element, using element.childNodes.item(n) is demonstrated. In this case the content of the second <tspan /> element is alerted. Note the use of parenthesis instead of brackets!

Comments