is there a specific better algorithm to solve this problem faster way

Aliayub Ali 0
Viewed 46

I am trying to iterate through the body tag and all its children deep like if one of the children of the body contains other children, I want to be to reach those as well, I am trying to come up better and faster algorithm can anyone help to come up a better one other than mine?

<body>
  <div class = "header-section">
    <header class = "header-himself">
      <div class = "nav-section">
        <nav class = "nav-himself">
          <div class = "list-section-left">
            <ul class = "list-itself-left">
              <li>Darster</li>
              <li>Company</li>
              <li>Safety</li>
              <li>Help</li>
            </ul>
          </div>
          <div class = "list-section-right">
          <ul class="list-itself-right">
            <li>Service</li>
              <li>Dart In</li>
              <li>Dart Out</li>
          </ul>
          </div>
        </nav>
      </div>
    </header>
  </div>
</body>


var target = document.querySelector('body');


function getChildren(target) {
     
    if(target.children.length === 0) {
        return;
    }

    for(var i = 0; i < target.children.length; i++) {
        console.log(target.children[i].tagName);
        getChildren(target.children[i]);
    }
}



getChildren(target);
optimization dom algorithm javascript
2 Answers

Here's a very simple tree walker:

const walkDOMTree = (visitor, types = [Node.ELEMENT_NODE]) => (node) => {
  if (types == "*" || types .includes (node .nodeType)) {
    visitor .visit (node)
  }
  node .childNodes .forEach (walkDOMTree (visitor, types))
  return visitor
} 

const visitor = (captured = []) => ({
  visit: (node) => {if (node .nodeName == 'LI') captured .push (node.textContent)},
  captured
})


const v = visitor ()
walkDOMTree (v) (document)
console .log ('LI content: ', v .captured)
<div class = "header-section">
  <header class = "header-himself">
    <div class = "nav-section">
      <nav class = "nav-himself">
        <div class = "list-section-left">
          <ul class = "list-itself-left">
            <li>Darster</li>
            <li>Company</li>
            <li>Safety</li>
            <li>Help</li>
          </ul>
        </div>
        <div class = "list-section-right">
          <ul class="list-itself-right">
            <li>Service</li>
            <li>Dart In</li>
            <li>Dart Out</li>
          </ul>
        </div>
      </nav>
    </div>
  </header>
</div>

walkDOMTree accepts a visitor -- simply an object with a visit method -- and optionally an array of the nodeTypes you care to visit. (If you supply '*', it will visit all node types, including attributes, comments, CDATA, etc. By default, it will visit only elements.) It returns a function that takes a DOM node and then recursively calls the visitor's visit function on that node and each of its descendants in document order.

I would often write this to accept a simple function, visit, rather than an object that has such a function. But this version makes it easier for your visitor to do useful things like collecting some data, as shown here, where our tree-walker visits all elements, and the visitor collects the text of all the LI elements.

However, I wouldn't likely use such a function nowadays, as browsers already supply a built-in TreeWalker API. If this is just for learning, then please feel free to play with the above, but for production work, use the standards!

Scott Sauyet0

You can just use the * selector.

var allBodyNodes = document.body.querySelectorAll('*');
scunliffe0
Related