javascript, finding a DOM element repeatedly

Question

For a given amount of html nodes, such as

<div id="main">
 <div class="pre1">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre2">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre3">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
</div>

The way to add text to the prop2 nodes would be something like

var el = document.getElementById('main').firstElementChild;
while (el) {
  var el2 = el.firstElementChild;
  while (el2) {
    if (el2.className == 'prop2')
      el2.textContent = 'hola';
      el2 = el2.nextElementSibling;
  }
  el = el.nextElementSibling;
}

https://jsfiddle.net/g9zoa1vz/

The problem is that conceptually, the first time that you locate the 'prop2' item, if you know that your data structure is constant, you are wasting time in searching again the position.

The question is: Is there a way to store the DOM location so that after your first search, then you can do something like

var el = document.getElementById('main').firstElementChild;
while (el) {
  el.firstElementChild.nextElementSibling.textContent = 'hola';
  el = el.nextElementSibling;
}

and then saving significant loop-time when many nodes are to be analyzed?

`document.querySelectorAll(".prop2").forEach(function() {})` Your question is an X/Y problem... — mplungjan, Aug 26 '16 at 05:31
You can push necessary elements into array, and then just iterate over it. — GlebkaF, Aug 26 '16 at 05:32
You know you can use `document.querySelectorAll('.prop2')` to get all of your `prop2` nodes at once, right? You can even be more specific: `document.querySelectorAll('.pre1 > .prop2')` will get only those nodes that are direct children of `pre1`... — Akshat Mahajan, Aug 26 '16 at 05:32
To be honest, if this bit of code is not bottlenecking the performance of your application I won't be too bothered about optimizing it. Are we talking about 100k of nodes; where it is slowing down the application drastically? — Samuel Toh, Aug 26 '16 at 05:34
@SamuelToh it was more a theoretical question, but I have already applied the solution to a function in my code and now instead of waiting 1 second it happens instantaneously (and it actually is a significant deal) — GWorking, Aug 26 '16 at 05:47

score 2 · Accepted Answer · edited May 23 '17 at 12:33

2

Your problem can be solved by using querySelectorAll

Note we use a for loop to iterate although some browsers will allow forEach.

More ways to iterate: How to loop through selected elements with document.querySelectorAll

window.onload=function() {
  var prop2 = document.querySelectorAll("#main .prop2");
  for (var i=0, n=prop2.length; i<n; i++) {
    prop2[i].innerHTML="hola";
  }
}

<div id="main">
 <div class="pre1">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre2">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
 <div class="pre3">
  <div class="prop1"></div>
  <div class="prop2"></div>
  <div class="prop3"></div>
 </div>
</div>

edited May 23 '17 at 12:33

Community

1
1

answered Aug 26 '16 at 05:35

mplungjan

169,008
28
173
236

forEach is an array function, querySelectorAll returns a nodeList. EDIT: ok, good fix ;) – Domino Aug 26 '16 at 05:41
Chrome actually allows this – mplungjan Aug 26 '16 at 05:44
@mplungjan thanks, I had known about it but it was long forgotten, so thanks a lot. I can assume that the nodeList will be sorted always by order of appearance? – GWorking Aug 26 '16 at 05:49
Yes. It is like a jQuery $("#main .prop2) – mplungjan Aug 26 '16 at 05:50
I have updated my answer to only get the length once. – mplungjan Aug 26 '16 at 05:55

Rakesh Sojitra · Answer 2 · 2016-08-26T05:57:44.697

0

Try below code

   var ele=document.querySelectorAll(".prop2");
   var l=ele.length;
   for(i=0;i<l;i++){
    ele[i].innerHTML="hello";
   }

edited Aug 26 '16 at 05:57

answered Aug 26 '16 at 05:41

Rakesh Sojitra

3,538
2
17
34

yes its like same to me. I am late in giving answer. – Rakesh Sojitra Aug 26 '16 at 05:44
Because Its not optimize code whenever loop execute it calculate length. If loop execute 100000 times then its length calculation is done 100000 time. if we define length before then it calculate only once. – Rakesh Sojitra Aug 26 '16 at 05:48
`var ele=document.querySelectorAll(".prop2"); var l=ele.length; for (....)` makes more sense – mplungjan Aug 26 '16 at 05:49
please see my above comment. – Rakesh Sojitra Aug 26 '16 at 05:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121887/discussion-between-rakesh-sojitra-and-mplungjan). – Rakesh Sojitra Aug 26 '16 at 05:51
I see what you meant to do: `for (var i=0, n=ele.length; i – mplungjan Aug 26 '16 at 05:56

javascript, finding a DOM element repeatedly

2 Answers2