代码之家 › 专栏 › 技术社区 › Azmisov

从另一个元素引用HTML节点

dom-traversal properties javascript

Azmisov · 技术社区 · 15 年前

我有这个剧本,我觉得比较简单。它基本上对iframe的内容进行树布局。当树的某些部分悬停时,它们对应的iframe元素被“选中”。但这对我来说是行不通的。下面是一些快速的半伪代码:

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);
}

问题发生在e。target.ref节点. 它只提供第一个节点(或HTML标记)的元素引用。其余的都没有定义。但是,当我检查的时候treeNode.refNode节点设置之后,它总是正确的。

所以,我做了一个快速测试:

<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 += "&lt;"+children[i].tagName.toLowerCase()+"&gt;";
                    //Add in its child nodes
                    createTree(node,children[i]);
                    //ending tag... CRASHES THE PROGRAM
                    node.innerHTML += "&lt;/"+children[i].tagName.toLowerCase()+"&gt;";
                }
            }
        }

        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>