Estoy tratando de obtener la ID del elemento xhtml en javascript para cambiar el color de un elemento cuando hago clic en un botón. Espero que el navegador encuentre un elemento agregado a través de una función que no sea querySelector y getElementById .
Como alternativa a los métodos predeterminados de dom, escribí esta función para encontrar elementos del árbol de nodos. No funcionó porque usé los NodeFilters incorrectos.
function findById(id) { const treewalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_ATTRIBUTE | NodeFilter.SHOW_TEXT, { acceptNode: function (node) { return NodeFilter.FILTER_ACCEPT; } }, false); let node; let nodes = []; while (node = treewalker.nextNode()) nodes.push(node); return nodes.filter(node => node.id === id); }Aquí hay un ejemplo mínimo reproducible de lo que estoy tratando de hacer.
/* Display the foobar text (cannot be directly written in the html file) */ let foobar = document.createElement('p'); foobar.innerHTML = 'Foo bar'; foobar.id = 'foobar'; // foobar.setAttributeNS(null, 'id', 'foobar'); document.body.appendChild(foobar); function findById(id) { const treewalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_ATTRIBUTE | NodeFilter.SHOW_TEXT, { acceptNode: function (node) { return NodeFilter.FILTER_ACCEPT; } }); let node; let nodes = []; while (node = treewalker.nextNode()) nodes.push(node); return nodes.filter(node => node.id === id); } function displayFoobar() { let e = findById('foobar'); setTimeout(function () { e.style.color = 'blue'; }, 1000); setTimeout(function () { e.style.color = 'black'; }, 2000); } <html> <head> <title>Test</title> </head> <body> <h1>Foo bar app</h1> <button onclick="displayFoobar();">display foobar</button> </body> </html>Su código con document.getElementById funcionando:
/* Display the foobar text (cannot be directly written in the html file) */ let foobar = document.createElement('p'); foobar.innerHTML = 'Foo bar'; foobar.id = 'foobar'; document.body.appendChild(foobar); function displayFoobar() { let e = document.getElementById('foobar'); setTimeout(function () { e.style.color = 'blue'; }, 1000); setTimeout(function () { e.style.color = 'black'; }, 2000); } <html> <head> <title>Test</title> </head> <body> <h1>Foo bar app</h1> <button onclick="displayFoobar();">display foobar</button> </body> </html> ACTUALIZACIÓN: si realmente desea utilizar su propia función personalizada, tenga en cuenta que
return nodes.filter(node => node.id === id);
devuelve una matriz.
Por lo tanto, necesita su primer elemento: let e = findById('foobar')[0];
/* Display the foobar text (cannot be directly written in the html file) */ let foobar = document.createElement('p'); foobar.innerHTML = 'Foo bar'; foobar.id = 'foobar'; // foobar.setAttributeNS(null, 'id', 'foobar'); document.body.appendChild(foobar); function findById(id) { const treewalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_ATTRIBUTE | NodeFilter.SHOW_TEXT, { acceptNode: function (node) { return NodeFilter.FILTER_ACCEPT; } }); let node; let nodes = []; while (node = treewalker.nextNode()) nodes.push(node); return nodes.filter(node => node.id === id); } function displayFoobar() { let e = findById('foobar')[0]; setTimeout(function () { e.style.color = 'blue'; }, 1000); setTimeout(function () { e.style.color = 'black'; }, 2000); } <html> <head> <title>Test</title> </head> <body> <h1>Foo bar app</h1> <button onclick="displayFoobar();">display foobar</button> </body> </html>