Searching a NodeList in JavaScript

Question

I have a NodeList of DOM elements with id's conforming to the following pattern:

prefix-number
(e.g. square-115, circle-15, triangle-2, etc.)

From a certain id, I need a reference to all the elements in the NodeList that have the same number but a different prefix.
For example, from the element with id="ellipse-25", how can I reference all the elements that are with the same number but a different prefix (e.g. polygon-25, square-25), if any?

In JavaScript, what is the most efficient way to do this? Can it be achieved without multiple or no NodeList iterations?

P.S. Here is the sample NodeList, as asked by Gangadhar Jannu, though it is not necessary, as it is more a conceptual question rather than a practical one:

<NodeList length="36">
  <path class="segm-lad segm-stroke" id="psax-1" POINTER-EVENTS="auto" d="M 436.508 173.867 A 192.267 192.267 0 0 0 270 77.7333 L 270 130 A 140 140 0 0 1 391.244 200 L 436.508 173.867 Z"></path>
  <path class="segm-lad segm-stroke" id="psax-2" POINTER-EVENTS="auto" d="M 270 77.7333 A 192.267 192.267 0 0 0 103.492 173.867 L 148.756 200 A 140 140 0 0 1 270 130 L 270 77.7333 Z"></path>
  <path class="segm-rca segm-stroke" id="psax-3" POINTER-EVENTS="auto" d="M 103.492 173.867 A 192.267 192.267 0 0 0 103.492 366.133 L 148.756 340 A 140 140 0 0 1 148.756 200 L 103.492 173.867 Z"></path>
  <path class="segm-rca segm-stroke" id="psax-4" POINTER-EVENTS="auto" d="M 103.492 366.133 A 192.267 192.267 0 0 0 270 462.267 L 270 410 A 140 140 0 0 1 148.756 340 L 103.492 366.133 Z"></path>
  <path class="segm-rca-cx segm-stroke" id="psax-5" POINTER-EVENTS="auto" d="M 270 462.267 A 192.267 192.267 0 0 0 436.508 366.133 L 391.244 340 A 140 140 0 0 1 270 410 L 270 462.267 Z"></path>
  <path class="segm-lad-cx segm-stroke" id="psax-6" POINTER-EVENTS="auto" d="M 436.508 366.133 A 192.267 192.267 0 0 0 436.508 173.867 L 391.244 200 A 140 140 0 0 1 391.244 340 L 436.508 366.133 Z"></path>
  <path class="segm-lad segm-stroke" id="psax-7" POINTER-EVENTS="auto" d="M 391.244 200 A 140 140 0 0 0 270 130 L 270 182.267 A 87.7333 87.7333 0 0 1 345.979 226.133 L 391.244 200 Z"></path>
  <path class="segm-lad segm-stroke" id="psax-8" POINTER-EVENTS="auto" d="M 270 130 A 140 140 0 0 0 148.756 200 L 194.021 226.133 A 87.7333 87.7333 0 0 1 270 182.267 L 270 130 Z"></path>
  <path class="segm-rca-lad segm-stroke" id="psax-9" POINTER-EVENTS="auto" d="M 148.756 200 A 140 140 0 0 0 148.756 340 L 194.021 313.867 A 87.7333 87.7333 0 0 1 194.021 226.133 L 148.756 200 Z"></path>
  <path class="segm-rca segm-stroke" id="psax-10" POINTER-EVENTS="auto" d="M 148.756 340 A 140 140 0 0 0 270 410 L 270 357.733 A 87.7333 87.7333 0 0 1 194.021 313.867 L 148.756 340 Z"></path>
  <path class="segm-rca-cx segm-stroke" id="psax-11" POINTER-EVENTS="auto" d="M 270 410 A 140 140 0 0 0 391.244 340 L 345.979 313.867 A 87.7333 87.7333 0 0 1 270 357.733 L 270 410 Z"></path>
  <path class="segm-lad-cx segm-stroke" id="psax-12" POINTER-EVENTS="auto" d="M 391.244 340 A 140 140 0 0 0 391.244 200 L 345.979 226.133 A 87.7333 87.7333 0 0 1 345.979 313.867 L 391.244 340 Z"></path>
  <path class="segm-lad segm-stroke" id="psax-13" POINTER-EVENTS="auto" d="M 354.744 247.293 A 87.7333 87.7333 0 0 0 247.293 185.256 L 260.821 235.742 A 35.4667 35.4667 0 0 1 304.258 260.821 L 354.744 247.293 Z"></path>
  <path class="segm-lad segm-stroke" id="psax-14" POINTER-EVENTS="auto" d="M 247.293 185.256 A 87.7333 87.7333 0 0 0 185.256 292.707 L 235.742 279.179 A 35.4667 35.4667 0 0 1 260.821 235.742 L 247.293 185.256 Z"></path>
  <path class="segm-lad segm-stroke" id="psax-15" POINTER-EVENTS="auto" d="M 185.256 292.707 A 87.7333 87.7333 0 0 0 292.707 354.744 L 279.179 304.258 A 35.4667 35.4667 0 0 1 235.742 279.179 L 185.256 292.707 Z"></path>
  <path class="segm-lad-cx segm-stroke" id="psax-16" POINTER-EVENTS="auto" d="M 292.707 354.744 A 87.7333 87.7333 0 0 0 354.744 247.293 L 304.258 260.821 A 35.4667 35.4667 0 0 1 279.179 304.258 L 292.707 354.744 Z"></path>
  <path class="segm-lad" id="a3c-2" POINTER-EVENTS="auto" d="M 174.4 72.6 c -2.2 1.1 -3.9 -0.9 -6.1 -0.8 c -1.1 0 -2 0.6 -2.9 1 c -4.5 1.9 -9.2 3 -13.8 3.8 c -3.6 0.7 -7.3 1.1 -11 2.3 c -1.6 0.5 -3.2 0.8 -4.8 0.9 l 2.1 19.8 c 4.9 -0.7 10.4 -1.9 15.9 -3.5 c 1.8 -0.5 8.2 -2.5 9.9 -3.2 c 6.2 -2.7 8.9 -4.3 14.8 -7.1 c 1.6 -0.8 4.4 -2.4 5.8 -3.4 c 1 -0.7 6.1 -4.2 6.1 -8.2 c 0 -2.5 -9.3 -5.1 -11.6 -4.3 C 177.2 70.4 176.1 71.8 174.4 72.6 Z"></path>
  <path class="segm-rca-cx" id="a3c-5" POINTER-EVENTS="auto" d="M 152.3 201 c 13.2 1.4 25.6 -2.5 39 -2.7 c 4.6 0 9.1 0.6 13.5 -0.5 c 2.6 -0.7 5.3 -1 7.7 -2.4 c 1.1 -0.6 2.1 -1.3 3.1 -2 c 3.6 -2.3 5.5 -6.5 5 -10.7 c -0.5 -3.9 -2 -7.6 -5.1 -10.5 c -2.2 -2 -4.8 -2.7 -7.7 -3.1 c -1.4 -0.1 -2.8 -0.2 -4.2 -0.2 c -1.7 0.9 -3.6 1.4 -5.5 2.2 c -0.8 0.3 -1.6 0.9 -2.4 1.2 c -3 1.1 -5.8 2.2 -8.8 3.2 c 0 -0.1 0 -0.2 0 -0.3 c -3.2 0.9 -6.3 1.9 -9.7 2 c -3.7 0.1 -7.1 0.6 -10.8 0.6 c -1.2 0 -3.5 -0.6 -4.7 -0.5 c -3.9 0.2 -2.9 1.3 -6.8 1.6 c -1.4 0.1 -6 -1.5 -7.7 -1.8 c -3.4 -0.7 -6.8 -1.3 -10.2 -2.1 l -5.7 22.1 C 138.4 199.3 145.2 200.2 152.3 201 Z"></path>
  <path class="segm-rca-cx" id="a3c-11" POINTER-EVENTS="auto" d="M 83.9 177.3 c 3 0.8 13.5 5.8 15.7 6.8 c 4.5 2.1 6.4 2.9 10.3 4.6 c 8.3 3.6 11.1 4.8 17.1 7 c 1.5 0.6 3 1 4.5 1.5 l 5.7 -22.1 c -0.8 -0.2 -1.6 -0.4 -2.4 -0.6 c -5.1 -1.4 -10 -3.5 -14.5 -6.3 c -5.4 -0.5 -5.8 -3.8 -8.6 -7.7 c -1.1 -1.5 -3.3 -2.2 -3.5 -3.2 c -0.2 -0.9 1.1 -1.5 0.8 -2.4 c -1 -2.8 -3.9 -2.8 -6 -4 c -0.6 -0.4 -1.3 -1.2 -2 -1.5 c -2.2 -0.7 -4.2 -1.5 -6.4 -2.1 c -2.8 -0.7 -5.7 -0.8 -8.4 -1.5 s -4.9 -1.9 -5.8 -2.2 c -2.6 -0.6 -4.9 -1.1 -7 -1.7 l -8.9 28.4 C 70.2 173 76.5 175.3 83.9 177.3 Z"></path>
  <path class="segm-lad" id="a3c-8" POINTER-EVENTS="auto" d="M 127.4 80.3 c -3.2 0.4 -6.2 -0.1 -9.4 -0.1 c -0.6 0.3 -1.3 0.5 -2 0.5 c -9.9 -0.8 -26 0 -38.9 0.9 l 2.7 19.7 c 5.4 -0.9 10.9 -0.6 16.5 -0.7 c 6.8 -0.1 13 0.4 19.4 0.2 c 4 -0.1 8.1 -0.5 12.1 -0.4 c 2.7 0.1 6.2 -0.2 10.1 -0.7 l -2.1 -19.8 C 133.1 80.1 130.2 79.9 127.4 80.3 Z"></path>
  <path class="segm-lad-cx" id="a3c-16" POINTER-EVENTS="auto" d="M 23 147.9 c 1.4 0.9 2.8 1.8 4.2 2.6 c 14.1 8.1 24.7 14.6 37.1 19.9 l 8.9 -28.4 c -6.6 -1.7 -11.4 -3.7 -18 -9.6 c -0.7 -0.6 -0.9 -1.7 -0.3 -2.5 c 0.8 -1 2.1 -1.5 3.1 -2.5 c 0.9 -0.9 0.7 -2.4 -0.6 -2.9 c -6.2 -2.3 -11.9 2.2 -18 1.7 c -1.6 -0.1 -2.4 -0.4 -2.6 -0.7 H 23 V 147.9 Z"></path>
  <path class="segm-lad" id="a3c-14" POINTER-EVENTS="auto" d="M 75.2 81.6 c -12.1 0.9 -24 4 -35 9.2 c -6.3 3 -13 6.4 -17.3 9 v 25.7 h 13.9 c -0.4 -0.4 0.4 -0.9 0.6 -1 c 2.8 -1.1 7.9 0.6 8.3 -3 c 0.2 -1.3 -2.3 -1.5 -2.7 -2.8 c -0.5 -2 2.4 -1.5 3.4 -2.3 c 1 -0.8 0.9 -2.7 2.3 -2.9 c 1.7 -0.3 3.7 0.4 5 -0.9 c 0.5 -0.5 0.6 -1.3 1 -1.8 c 0.5 -0.6 1.6 -0.6 2.3 -1.1 c 0.9 -0.7 3.3 -2.2 4.1 -2.8 c 2 -1.4 2.6 -1.8 5.1 -2.8 c 0.6 -0.3 1.7 -0.5 2.4 -0.5 c 3 0 5.9 -0.1 8.8 -2 c 0.8 -0.2 1.6 -0.3 2.4 -0.5 L 77 81.5 C 76.4 81.5 75.8 81.6 75.2 81.6 Z"></path>
  <path class="segm-rca-lad" id="a4c-9" POINTER-EVENTS="auto" d="M 74.6 93.2 c 1.4 2.5 -2.2 4.7 -1.8 7.6 c 0.3 2.1 3 1.2 3.4 2.9 c 1.3 6.3 1.2 13 3.2 18.1 c 1.9 4.8 0 15.4 5.9 19 c 1.2 0.8 -1.2 1.2 -1.6 1.9 c -0.6 1.1 -0.5 2 -0.2 2.8 l 23.9 -3.1 c -0.2 -2.4 0.9 -5.1 -0.7 -7.3 c -0.8 -1.1 -1.8 -2.1 -2.8 -3.1 c -0.9 -0.9 0.3 -1.8 1.1 -2.7 c 0.8 -0.9 0.3 -2.2 0.5 -4.2 c 0.4 -4.2 -0.8 -8.2 -2.6 -12.1 c -0.6 -1.3 1.1 -3.2 0.3 -4.8 c -3.4 -6.5 -4.8 -13 -5.8 -20.1 H 72 C 72.7 89.7 73.6 91.4 74.6 93.2 Z"></path>
  <path class="segm-rca" id="a4c-3" POINTER-EVENTS="auto" d="M 86.5 149.7 c 3.9 6.2 3.3 13 6.3 19.4 c 0 0.1 0.1 0.1 0.1 0.2 c 2.1 4.5 4.3 9.7 4.9 15.1 c 0.4 3.2 0.8 7.1 0.8 7.1 c 0.3 2.4 2.4 7.5 3 8 c 1.4 1 3.6 0.9 5 0 c 1 -0.7 1.4 -1.6 2 -3 c 0.7 -1.6 2 -5 2 -5 s 1.1 -2.8 2.2 -5.7 c 1 -5.4 0.4 -10.9 1.3 -16.3 c 1.7 -9.8 -3.2 -17.7 -6.5 -25.9 c -0.2 -0.4 -0.3 -0.9 -0.3 -1.3 l -23.9 3.1 C 84.1 146.9 85.6 148.2 86.5 149.7 Z"></path>
  <path class="segm-lad" id="a4c-14" POINTER-EVENTS="auto" d="M 72.8 25.9 c -1.4 2.5 -2.4 5.1 -2.8 7.6 c -1.5 8.7 -1.8 27.8 -1.8 27.8 c 0.3 6.3 0.2 15.1 2 21.4 c 0.5 1.9 1.1 3.5 1.8 5.2 h 25.3 c 0 -0.3 -0.1 -0.5 -0.1 -0.8 c -0.4 -2.7 0.3 -5.6 0.2 -8.4 c -2.7 -7.7 -4 -14.4 -4.8 -19.3 c -1.5 -10.6 -1.8 -17.1 0 -20 c 2.6 -4.4 2 -7.4 2.3 -8.7 c 0.3 -1.6 3.3 -1.1 3.7 -1.3 c 0.6 -0.4 1.2 -0.7 1.8 -1 l -2.3 -8.8 L 72.8 25.9 Z"></path>
  <path class="segm-lad" id="a4c-17" POINTER-EVENTS="auto" d="M 98 19 l 0.2 0.7 l 31.6 -7.7 c -11.4 -5.6 -24.1 -8.2 -37.2 -5.6 C 88.5 7.2 78 16.2 72.8 25.9 l 25.4 -6.2 L 98 19 Z"></path>
  <path class="segm-lad-cx" id="a4c-6" POINTER-EVENTS="auto" d="M 225.1 158.2 c -0.3 -4.3 -0.8 -8.5 -1.4 -12.7 c -1.7 -11.4 -7 -21.7 -12.6 -32.2 l -29 12.9 c 0.3 0.5 0.7 1 1 1.5 c 0.6 0.8 0.5 2.4 0.8 3.7 c 0.7 4.3 4.9 6.7 6.5 10.7 c 1.9 4.9 6.5 9.2 7.9 14.5 c 0 0 1 3.9 2.4 9.4 c 0.6 2.4 1.6 4.6 3 6.6 c 1.7 2.4 3.4 4.4 5 5 c 3.5 1.5 7.2 1.5 9 1 c 3.2 -0.9 5.8 -4.6 7.4 -10.3 c 0.3 -0.9 0.4 -1.9 0.4 -2.8 C 225.4 163 225.3 160.6 225.1 158.2 Z"></path>
  <path class="segm-lad-cx" id="a4c-12" POINTER-EVENTS="auto" d="M 205.9 103.4 c -8.5 -16.7 -18 -32.5 -29.8 -46.9 L 149.3 77 c 0.3 1.5 1.1 3.1 1.3 4.5 c 2.9 4.4 1.6 9.8 1.4 21.7 c -0.1 4.4 0 9.8 0.6 16.3 c 1.4 16.3 8.6 8.1 12 3 c 4 -6 4.9 -16.9 6 -16 c 4.1 3.4 -1.2 5.3 3.9 7.9 c 3.6 1.9 4.9 7.6 7.5 11.8 l 29 -12.9 C 209.3 110 207.6 106.7 205.9 103.4 Z"></path>
  <path class="segm-lad-cx" id="a4c-16" POINTER-EVENTS="auto" d="M 161.2 40.6 c -4.2 -4 -6 -9.7 -10.3 -13.7 c -6.3 -5.9 -13.4 -11 -21.2 -14.8 l -31.6 7.7 l 2.3 8.8 c 2.9 -1.3 5.9 -1.2 9.2 -0.1 c 1.1 0.3 2.1 2.7 3 3.1 c 2.1 0.8 1 -3 5.6 0.6 c 3.4 2.7 6.5 4.6 8.4 6.4 c 8.3 8.2 12.6 9.4 16 19 c 4.5 12.7 9.6 13.3 7 17 c -0.5 0.7 -0.5 1.6 -0.3 2.5 L 176 56.5 C 171.5 51 166.6 45.6 161.2 40.6 Z"></path>
  <path class="segm-lad" id="a2c-15" POINTER-EVENTS="auto" d="M 54.6 30 c -0.1 0.1 -0.1 0.2 -0.2 0.3 c -5 7.1 -13.9 24.4 -17.4 32.5 c -1.7 3.9 -4.2 9.5 -6.8 15.5 l 29.4 8.4 c 0.3 -0.3 1.8 -2.1 2.2 -5 c 0.5 -3.3 0 -9.3 0 -9.3 s 2.5 0 4 -2.8 c 1.5 -2.8 1.5 -7.1 2.8 -9.1 c 1.3 -2 2.8 -3 4.8 -3.5 c 2 -0.5 2.8 -2 3.3 -3.5 c 0.5 -1.5 1.8 -7.1 1.8 -7.1 s 0.5 3.8 3 3.8 c 0.1 0 0.2 0 0.3 0 V 30 H 54.6 Z"></path>
  <path class="segm-lad" id="a2c-17" POINTER-EVENTS="auto" d="M 107.9 30 c -7 -8.4 -19.6 -18.3 -29 -18.3 c -10.4 0 -19.1 11.3 -24.2 18.3 h 27.2 H 107.9 Z"></path>
  <path class="segm-rca" id="a2c-4" POINTER-EVENTS="auto" d="M 3.3 169.9 c -0.3 4.8 -0.8 4.5 0 11.6 c 0.8 7.1 5 23.7 9.8 33.8 c 4.1 8.6 18.8 19.6 21.4 17.3 c 9 -8 0.6 -16 -0.6 -19.5 c -1.3 -3.5 -6.3 -11.1 -7.1 -17.6 c -0.8 -6.5 0 -12.6 -0.3 -15.6 c -0.3 -3 -1 -5.8 -2 -6.8 c -1 -1 1.8 0.3 1.8 0.3 s 0.8 -6.8 1.3 -10.8 c 0.5 -4 2 -2.5 2 -2.5 c 0.4 -2 0.9 -4.6 1.4 -7.6 l -24 -7 C 5.2 153.4 3.6 162.7 3.3 169.9 Z"></path>
  <path class="segm-rca" id="a2c-10" POINTER-EVENTS="auto" d="M 22.9 96.6 c -3.5 10.1 -11.3 30.7 -13.9 40.3 c -0.7 2.5 -1.4 5.4 -2 8.4 l 24 7 c 1.6 -8.3 4.1 -19.1 8.5 -25.7 c 2.3 -3.5 0.3 10.8 3 19 c 3 9 9 3 11 -5 c 4 -10 5.8 -31.8 5.8 -37.9 s 0.3 -15.9 0.3 -15.9 s 0 0 0.1 -0.1 l -29.4 -8.4 C 27.5 84.6 24.7 91.3 22.9 96.6 Z"></path>
  <path class="segm-lad" id="a2c-13" POINTER-EVENTS="auto" d="M 128.7 70.1 c -3.5 -13.9 -12.3 -28.5 -18.6 -37.3 c -0.6 -0.9 -1.4 -1.9 -2.2 -2.8 H 81.8 v 20.2 c 2.3 -0.1 3.7 -1.2 3.7 -1.2 s 0.3 3.3 3.3 5.3 c 3 2 4.3 0 4.3 0 s 1.8 3.8 2.8 5 c 1 1.3 1.8 4.5 3 8.8 c 1.3 4.3 4.9 13.6 5 16.9 c 0 0.2 0 0.3 0 0.5 l 26.8 -6.9 C 130.1 75.5 129.4 72.7 128.7 70.1 Z"></path>
  <path class="segm-lad" id="a2c-7" POINTER-EVENTS="auto" d="M 138.1 119.5 c -1 -10.3 -4.2 -27.4 -7.3 -40.9 l -26.8 6.9 c 0.3 6 2.5 4.8 2.5 4.8 s 1.3 10.8 1.3 18.6 c 0 7.8 -2.3 22.4 -0.8 29.7 c 0.7 3.4 2.5 8.3 4.4 13.5 l 28.6 -7.4 C 139.3 136.2 138.8 126.6 138.1 119.5 Z"></path>
  <path class="segm-lad" id="a2c-1" POINTER-EVENTS="auto" d="M 141.6 160.8 c -0.7 -3.4 -1.2 -9.4 -1.7 -16.1 l -28.6 7.4 c 2.1 5.8 4.3 11.8 4.9 16.3 c 1.3 8.3 2.8 14.6 2 22.7 c -0.4 4.4 0.2 9.7 -0.8 13.5 c -0.8 3.1 -4.6 13.2 2 16 c 7 3 16.8 -10.8 19 -14 c 4 -6 3.7 -8.2 6 -17 C 146.8 180.7 143.1 168.6 141.6 160.8 Z"></path>
  </NodeList>

try to post the sample NodeList, so that one can look into it — Gangadhar Jannu, Aug 19 '17 at 14:43
It's hard to see how it can done without iterations given the NodeList already exists. An alternative might be to create the NodeList according to the desired ID. For example, `document.querySelectorAll([id$="-25"])` would select all elements with an `id` attribute ending with `-25`. — Boaz, Aug 19 '17 at 14:51
I could use Regex and one iteration. Can it be done without iterations at all? If all the NodeList items id's are converted into a string, if this is possible. — Samo Zaparola, Aug 19 '17 at 14:54
@Boaz: thank you, your suggestion of an alternative querySelectorAll is much more effective, but is it possible to exclude the prefix of the initial element ("ellipse-25" from my example) from the selection? — Samo Zaparola, Aug 19 '17 at 15:17
@skyline3000: yes, the prefixes are known, what is uncertain is whether such elements exist at all. The solution of Boaz does not require any knowledge of the names of the prefixes, however. — Samo Zaparola, Aug 19 '17 at 15:21

Boaz · Answer 1 · 2017-10-09T09:22:30.140

1

Given the NodeList in your scenario already exists, it's hard to see how it can be done without iterations.

However, an alternative could be to create the NodeList according to the desired id, in the first place.

For example:

let getRelatedElements = id =>
    document.querySelectorAll('[id$="-'+id.replace(/\D/g, '')+'"]:not(#'+id+')');

This uses a combination of an attribute-selector to select elements with the same numerical suffix and a :not selector to ignore the element with the original id.

edited Oct 09 '17 at 09:22

answered Aug 19 '17 at 15:55

Boaz

19,892
8
62
70

Boaz, thank you once again! As I don't know how advanced css selections work, your example is greatly appreciated; it shows that a css selection can be extended with some regex functionality - this is great! The concept of NodeList is vague to me, if it were a simple array, I could use the indexOf() method. Are there any methods that can convert the desired NodeList attributes into an array or a string? – Samo Zaparola Aug 19 '17 at 16:30
@SamoZaparola A NodeList is a collection of _objects_, for example HTML elements. So while you can "convert" the collection to an array (e.g. with the ES6 [spread operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator) or [a more traditional way](https://stackoverflow.com/questions/3199588/fastest-way-to-convert-javascript-nodelist-to-array)), the values of that array would remain _objects_. – Boaz Aug 19 '17 at 16:38
@SamoZaparola In general, if you wish to query a DOM structure, [selectors are usually your weapon of choice](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors). – Boaz Aug 19 '17 at 16:41

Searching a NodeList in JavaScript

1 Answers1