Question

我有这个脚本，我认为这个脚本相对简单。它基本上是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.refNode出现问题。它仅为第一个节点（或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>

我发现在追加子树节点后添加innerHTML会剥夺孩子们的refNode属性。所以，这就是问题发生的地方。

Answer 1

所以，我想解决方案只是将.innerHtml更改为.appendChild(document.createTextNode(...))。我的脚本仅供本地使用，仅适用于FF3 +，除此之外，应该没有问题。

Answer 2

您无法将对象存储在元素的属性中。如果检查属性，则看到的是指定节点的字符串表示形式。如果您使用jquery，可以使用jQuery.data()

实现

从另一个元素引用HTML节点

2 个答案: