nodo de referencia HTML de otro elemento

StackOverflow https://stackoverflow.com/questions/3868524

Pregunta

Tengo este script, lo cual pensé que era relativamente simple. Básicamente se hace un árbol-diseño de los contenidos de un iframe. Cuando se revoloteaban partes del árbol, sus correspondientes elementos de marco flotante se 'selected'. Pero no está funcionando, para la vida de mí. Aquí hay un código de pseudo-media rápida: 

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

El problema se produce con e.target.refNode. Sólo se da una referencia del elemento con el primer nodo (o la etiqueta HTML). El resto no están definidos. Pero, cuando compruebo treeNode.refNode justo después de su creación, siempre es correcta.

EDIT:

Por lo tanto, me hizo una prueba rápida: 

<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>

y me di cuenta de que la adición de innerHTML después de anexar los nodos del árbol niño estaba quitando la propiedad nodo_ref de los niños. Por lo tanto, ahí es donde está ocurriendo el problema.

¿Fue útil?

Solución

Por lo tanto, supongo que la solución no sería más que al cambio .innerHtml a .appendChild(document.createTextNode(...)). Mi escritura es sólo para uso local, y sólo se construye para FF3 +, por lo que aparte de eso, no debería haber ningún problema.

Otros consejos

No se puede almacenar objetos en los atributos de los elementos. Lo que se ve si se comprueba la cualidad es la cadena representación del nodo asignado. Si desea utilizar jQuery, que podría implementar con jQuery.data ()

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top