Estoy trabajando para tratar de obtener el innerHTML o el value (dependiendo de la etiqueta) de una etiqueta, pero no estoy seguro de cómo hacer un bucle con las etiquetas secundarias anidadas. Me gustaría que el estilo se aplique en una etiqueta cuando solo incluya "Mundo". Aquí está el enlace del violín . ¿Podría ayudar smb?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <h2>Iterave over Children of HTML Element using JavaScript</h2> <div id="myElement"> <p>Hello <span>World</span>!</p> <ul> <li>List Item</li> </ul> <div> Sample World <div> Nested Div <div> Another Nested Div with World </div> </div> </div> </div> <br> <button type="button" onclick="execute()">Click Me</button> <p id="out"></p> <script> function execute(){ var element = document.getElementById("myElement"); var children = element.children; for(var i=0; i<children.length; i++){ var child = children[i]; console.log(child) if (child.innerHTML.includes("World")) child.style.color = "red"; } } </script> </body> </html>En mi opinión, la solución para esto es bastante sencilla, ya que tanto innerHtml como innerText devuelven el texto de todos los nodos secundarios. Primero, haría una solución recursiva: mirar dentro de todos esos nodos secundarios. Como solo necesitamos el texto del padre, tenemos que eliminar todos los hijos del nodo. Y tenemos que hacerlo sin alterar el DOM: la clonación de elementos será la respuesta aquí. El tercer problema surge cuando se trata del estilo de nodo de los padres que también se aplica a los niños: usaré una clase CSS auxiliar que mantendrá el texto en negro.
function recursive_execute(el){ var element; //out target element if(!el){ //if nothing is passed to function we take the root: `myElement` element = document.getElementById("myElement"); } else{ element = el; } var children = element.children; if(children.length > 0){ for(let i = 0; i < children.length; i++){ let child = children[i]; recursive_execute(child); //call function for all children of the target element } } let item = element.cloneNode(true); //cloning target node if(item.children && item.children.length > 0){ for(let i = 0; i < item.children.length; i++){ let child = item.children[i]; if(child.tagName){ //getting rid of children who are tagged (so we don't get rid of text) item.removeChild(child); } } } if(item.innerHTML && item.innerHTML.includes("World")){ //check if our clone contains the desired word element.style.color = "red" }else{ element.className = "helper" //if not - assigning helper class } } .helper{ color:black; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <h2>Iterave over Children of HTML Element using JavaScript</h2> <div id="myElement"> <p>Hello <span>World</span>!</p> <ul> <li>List Item</li> </ul> <div> Sample World <div> Nested Div <div> Another Nested Div with World </div> </div> </div> </div> <br> <button type="button" onclick="recursive_execute()">Click Me</button> <p id="out"></p> </body> </html>