Last active
October 30, 2021 22:58
-
-
Save cagataycali/8f8950f831160b21001182867340b9d4 to your computer and use it in GitHub Desktop.
[JavaScript] DOM traversal for finding one match target
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>DOM traversal</title> | |
| </head> | |
| <body> | |
| <h1>DOM traversal</h1> | |
| <div> | |
| Hi, this is the example case of word search by traversing through the DOM | |
| </div> | |
| <div> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem | |
| totam sed quidem deleniti porro vitae, blanditiis repudiandae | |
| perspiciatis animi quia, et pariatur voluptatem, dolores reiciendis sit | |
| dolor earum saepe. Non. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo molestias | |
| doloremque iste a? Animi iure architecto laboriosam quibusdam reiciendis | |
| id, autem assumenda magni laudantium cupiditate tenetur velit? | |
| Laudantium, numquam odit? | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo beatae ex | |
| excepturi maxime sunt! Libero sint beatae veritatis nihil est laborum | |
| sunt? Similique, vero voluptatibus iure laborum accusamus itaque quia? | |
| </p> | |
| <span> | |
| <b></b> | |
| <b></b> | |
| <b></b> | |
| <b>CAGATAY</b> | |
| </span> | |
| </div> | |
| <script> | |
| // Traverse through the DOM, | |
| // Find the target text DOM element. | |
| // This algorithm going to find last of the element. (Not matches all) | |
| function traverse(root, target) { | |
| let element = root; | |
| let result = null; | |
| for (const children of root.children) { | |
| result = traverse(children, target); | |
| if (result.innerText.includes(target)) { | |
| element = result; | |
| } | |
| } | |
| return element; | |
| } | |
| traverse(document.body, "CAGATAY"); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>DOM traversal</title> | |
| </head> | |
| <body> | |
| <h1>DOM traversal and paint</h1> | |
| <div> | |
| Hi, this is the example case of word search by traversing through the DOM | |
| </div> | |
| <div> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem | |
| totam sed quidem deleniti porro vitae, blanditiis repudiandae | |
| perspiciatis animi quia, et pariatur voluptatem, dolores reiciendis sit | |
| dolor earum saepe. Non. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo molestias | |
| doloremque iste a? Animi iure architecto laboriosam quibusdam reiciendis | |
| id, autem assumenda magni laudantium cupiditate tenetur velit? | |
| Laudantium, numquam odit? | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo beatae ex | |
| excepturi maxime sunt! Libero sint beatae veritatis nihil est laborum | |
| sunt? Similique, vero voluptatibus iure laborum accusamus itaque quia? | |
| </p> | |
| <span> | |
| <b></b> | |
| <b></b> | |
| <b></b> | |
| <b>CAGATAY</b> | |
| <b data-color="blue">CAGATAY</b> | |
| <b data-color="red">CAGATAY</b> | |
| </span> | |
| </div> | |
| <script> | |
| // Traverse through the DOM, | |
| // Find the target text DOM element. | |
| // Set their background as their data-color | |
| // Remove the parent nodes from elements array | |
| /* | |
| returns [Node, Node, Node, Node]... | |
| */ | |
| function traverse(root, target, elements) { | |
| let result = null; | |
| for (const children of root.children) { | |
| if ( | |
| !children.innerText.includes(target) || | |
| children.nodeName === "SCRIPT" | |
| ) { | |
| continue; | |
| } | |
| if (children.getAttribute("data-color") !== null) { | |
| elements.push(children); | |
| } | |
| traverse(children, target, elements); | |
| } | |
| return elements; | |
| } | |
| function paintElements(elements) { | |
| for (const element of elements) { | |
| element.style.backgroundColor = element.getAttribute("data-color"); | |
| } | |
| } | |
| const elements = []; | |
| traverse(document.body, "CAGATAY", elements); | |
| paintElements(elements); | |
| console.log(elements, "elements"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment