从另一个元素引用 HTML 节点

发布于 2024-09-26 13:47:31 字数 2695 浏览 1 评论 0原文

我有这个脚本，我认为它相对简单。它基本上对 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属性。所以，这就是问题所在。

原文

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.

分享到QQ

分享到微博