0
88
VistasquerySelectorAll no captura todos los elementos
Estoy tratando de escanear y manipular el DOM de una página web con el siguiente código:
var elements = document.querySelectorAll('*'); for (var i = 0; i < elements.length; i++) { if (!elements[i].firstElementChild) { if (elements[i].innerHTML != "" ){ elements[i].innerHTML = "abc_"+ elements[i].innerHTML+"_123"; } } }Si bien funciona bien en muchas páginas, mi objetivo real no es recoger todos los elementos en una página específica. En esa página, captura y edita cadenas de pocos elementos, pero no todos. También he intentado usar getElementsByTagName()
Los elementos que no se capturan tienen un XPath como:
/html/body/div[4]/div[2]/div/div[2]/div/div/div/div/div[1]/div/div[2]/nav/div/div[1]/div/span/div/text()[1]También noté "flex" escrito delante de estos elementos.
También probé el guión de Douglas Crockford, pero tampoco puede captar los elementos descritos anteriormente.
El guión de Douglas está publicado en
function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } } // Example usage: Process all Text nodes on the page walkTheDOM(document.body, function (node) { if (node.nodeType === 3) { // Is it a Text node? var text = node.data.trim(); if (text.length > 0) { // Does it have non white-space text content? // process text } } });¿Alguna idea de qué estoy haciendo mal?
Aquí hay una captura de pantalla del elemento de inspección: [
]
1 Respuestas
Responde la pregunta0
En su fragmento, no está seleccionando todos los nodos, ya document.querySelectorAll(*) no selecciona los nodos de texto, sino solo los elementos.
Además, está ignorando explícitamente los nodos de texto, porque especifica .firstElementChild . Un nodo de texto no es un elemento. Un elemento en el DOM es una "etiqueta" como <div> por ejemplo. Tiene el tipo de nodeType: 1 un nodo de texto tiene el tipo de nodo nodeType: 3 .
Entonces, si procesas, por ejemplo:
OuterTextNode<div>InnerTextNode</div> el div sería el primer elemento e Inner- y OuterTextNode son nodos de texto. Tanto el selector de consultas como .firstElementChild solo seleccionarían el elemento (div) aquí.
Debería funcionar con el código DOM-tree-walking:
const blackList = ['script']; // here you could add some node names that you want to ignore function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { if (!blackList.includes(node.nodeName.toLowerCase())) { walkTheDOM(node, func); } node = node.nextSibling; } } walkTheDOM(document.body, function(node) { if (node.nodeType === 3) { var text = node.data.trim(); if (text.length > 0) { console.log(text); console.log(`replaced: PREFIX_${text}_POSTFIX`); } } }); .as-console-wrapper { top: 0; max-height: 100% !important; } <div> All <span>In span</span> Some more text <div> <div> Some nested text <div>Sibling</div> <span> Another Another <span> Deep <span> <span> <span> <span> <span>Deeper</span> </span> </span> </span> </span> </span> </span> </div> <!-- Some comment !--> <script> // some script const foo = 'foo'; </script> </div> </div>