JavaScript: Select multiple elements by z-index number (in dynamic DOM)

Question

I would like to select ALL elements in DOM that have the z-index = 2147483647 using 100% JavaScript (NO jQuery)

The DOM is constantly dynamically changing; adding and removing elements. The code to remove elements by z-index ### MUST have a DOM event listener

I've tried so many iterations of similar codes without success. This is my last iteration attempt and for some reason it is not working

window.addEventListener('change', function() {
  var varElements = document.querySelectorAll("[style='z-index: 2147483647']");
    if(varElements) { for(let varElement of varElements) { varElement.remove(); } }
} //function
}) //window.

jQuery is JavaScript, all you need is convert it - it's not a hard task. — Adrian, May 20 '20 at 10:58
What did you expect binding a handler for a `change` event to `window` would achieve in the first place? — CBroe, May 20 '20 at 11:32
@tusharzore 1) selecting all elements with style property would unnecessary add an additional load to the client. To the point of oveload 2) the link does not answer how to delete an element with `z-index == ###` 3) dies not listen to DOM for changes `("change", function() {` — Omar, May 20 '20 at 11:38
@CBroe I was hopping `window.addEventListener('change', function() {` would be triggered every time the DOM changes — Omar, May 20 '20 at 11:45
Then only existing `change` event is for form fields, when the user input inside of those is changed via the UI. You would need to use a MutationObserver here, to watch for DOM changes. — CBroe, May 20 '20 at 11:48
I gave you a keyword so that you can start reading up on it. — CBroe, May 20 '20 at 11:52

ajinkya narkar · Answer 1 · 2020-05-20T11:49:38.497

check below code

const check = () => {
  var varElements = document.querySelectorAll("*");
     for(let varElement of varElements) { 
      if(varElement.style['z-index'] == 10) { 
       var node = document.createElement("LI");
    var textnode = document.createTextNode(varElement.className);
    node.appendChild(textnode); 
      document.getElementById('list').appendChild(node)
        }
    }
}

window.addEventListener('change', check )

window.addEventListener('load', check);

<div class="top" style="z-index:10">
<div class="inner1" style="display:'block';z-index:10">
<div class="inner2" style="z-index:10">

</div>
</div>
<div class="inner3" style="z-index:12">

</div>
</div>

<ul id="list">

</ul>

Rob Monhemius · Answer 2 · 2020-05-20T20:01:21.873

You cannot select an element based on css in css. So you cannot use the querySelectorAll. This code works if the css is set by the inline style attribute. Here is the code explained:

Get all element using *.
Turn the NodeList into an array.
Filter out the elements that do not have a specific css property.
get the css properties using: window.getComputedStyle()

window.addEventListener( 'load', () => {
  let all = document.querySelectorAll('*');
  all = Array.from(all);
  
  const filtered = all.filter( zindex_filter )
  console.log( filtered )
})

function zindex_filter (element) {
  const style = window.getComputedStyle(element);
  console.log( style.getPropertyValue('z-index') )
  if( style.getPropertyValue('z-index') == 100 ) return true;
  else return false;
}

.div {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.zindex {
  position: relative;
  z-index: 100;
}

<div class='zindex div'></div>
<div class='div'></div>
<div class='div' style='position: relative; z-index: 100; width: 100px;'></div>

Notes:

window.getComputedStyle() docs
note that the z-indexed must be positioned correctly to return a value other than auto.

Mark Schultheiss · Answer 3 · 2020-05-20T12:34:41.007

There are some things that come into play here i.e. it has to be positioned to get a z-index. Here I show some examples and how to find stuff that has a z-index not "auto";

You can then loop the list to find a z-index you desire. Here, I just pushed all elements with a z-index not "auto" but you could use your selected index value to filter those out in the conditional for example if (!isNaN(zIndex) && zIndex != "auto" && zIndex == 4042) for those with 4042 value;

Once you have your elements, you can do what you desire which is to set an event handler on each of them.

This specifically answers the question of finding the elements by z-index, not the ultimate desire which is another question of how to manage the changes to the DOM and adding/removing on mutation.

var getZIndex = function(checkelement) {
  let compStyles = window.getComputedStyle(checkelement);
  let z = compStyles.getPropertyValue('z-index');
  if (typeof z == "object" || (isNaN(z) && checkelement.parentNode != document.body)) {
    return getZIndex(checkelement.parentNode);
  } else {
    return z;
  }
};

let evallist = document.querySelectorAll("div");
let zthings = [];
for (let item of evallist) {
  let zIndex = getZIndex(item);
  if (!isNaN(zIndex) && zIndex != "auto") {
    zthings.push(item);
  }
}
console.log(zthings);

.sureThing {
  z-index: 4242;
  position: absolute;
  background: gold;
  top: 4em;
}

<div class="mything">Howddy</div>
<div class="sureThing">Here I am</div>
<div class="onelink"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle">https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle</a></div>
<div class="otherthing" style="z-index:4040;">other thing set internal woops Ihave no position so I am not in list</div>
<div class="otherthing" style="z-index:4040;position: absolute;top:5em;">other thing set internal OK</div>

JavaScript: Select multiple elements by z-index number (in dynamic DOM)

3 Answers3