JavaScript：通过z索引号选择多个元素（在动态DOM中）

Question

我想选择DOM中的所有元素使用100％JavaScript的z-index = 2147483647具有（NO jQuery）

DOM不断变化；添加和删​​除元素。通过z-index删除元素的代码### 必须具有DOM事件监听器

我已经尝试了很多类似代码的迭代，但是都没有成功。这是我的最后一次迭代尝试，由于某种原因，它不起作用

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

Answer 1

检查下面的代码

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>

Answer 2

您无法在CSS中基于CSS选择元素。因此，您无法使用querySelectorAll。如果css是由内联样式属性设置的，则此代码有效。这是解释的代码：

• 使用*获取所有元素。
• 将NodeList转换为数组。
• 过滤掉没有特定css属性的元素。

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

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

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

.zindex {
  z-index: 100;
}

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

但是您可以看到element.style.getPropertyValue('z-index')不能获得用CSS设置的值。因此，如果有人知道如何让那些使用JS的人发表评论，那么我将修改答案。