I have this script, which I thought was relatively simple. It basically makes a tree-layout of an iframe's contents. When parts of the tree are hovered, their corresponding iframe elements are 'selected'. But it isn't working, for the life of me. Here is some quick half-pseudo code:
function traverseTree(c,o){
//c = the tree subset to put more stuff in
//o = the element to traverse
var treeNode = D.createElement('div');
c.appendChild(treeNode);
treeNode.innerHTML = o.tagName;
treeNode['refNode'] = o;
treeNode.addEventListener('mouseover',check,false);
loop(o.children){
traverseTree(treeNode,o.child);
}
}
function check(e){
alert(e.target.refNode);
}
The problem occurs with e.target.refNode. It only gives an element reference with the first node (or the HTML tag). The rest are undefined. But, when I check treeNode.refNode right after setting it, it is always right.
EDIT:
So, I made a quick test:
<html>
<head>
<title>Test</title>
<script>
window.onload = function(){
createTree(document.getElementById('tree'),
document.getElementById('page').contentWindow.document);
}
function createTree(c,o){
//get list of children
var children = o.childNodes;
//loop through them and display them
for (var i=0;i<children.length;i++){
if (typeof(children[i].tagName) !== 'undefined'){
//Create a tree node
var node = document.createElement('div');
if (children[i].childNodes.length > 0){
node.style.borderLeft = '1px dotted black';
node.style.marginLeft = '15px';
}
c.appendChild(node);
//Reference to the actual node
node.refNode = children[i];
//Add events
node.addEventListener('mouseover',selectNode,false);
//Display what type of tag it is
node.innerHTML += "<"+children[i].tagName.toLowerCase()+">";
//Add in its child nodes
createTree(node,children[i]);
//ending tag... CRASHES THE PROGRAM
node.innerHTML += "</"+children[i].tagName.toLowerCase()+">";
}
}
}
function selectNode(e){
document.getElementById('info').innerHTML = e.target.refNode;
}
</script>
</head>
<body>
<iframe id='page' src='some_page.html'></iframe>
<div id='info' style='border-bottom:1px solid red;margin-bottom:10px;'></div>
<div id='tree'></div>
</body>
</html>
and I figured out that adding innerHTML after appending the child tree nodes was taking away the children's refNode property. So, that's where the problem is occurring.