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
– Adrian, Commented May 20, 2020 at 10:58
What did you expect binding a handler for a change event to window would achieve in the first place? — C3roe
– C3roe, Commented May 20, 2020 at 11:32
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. — C3roe
– C3roe, Commented May 20, 2020 at 11:48

ajinkya narkar · Accepted Answer · 2020-05-20 11:49:38Z

0

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>

edited May 20, 2020 at 11:49

answered May 20, 2020 at 11:26

ajinkya narkar

3821 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Schultheiss · Accepted Answer · 2020-05-20 12:34:41Z

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>

Rob Monhemius · Accepted Answer · 2020-05-20 20:01:21Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related