JavaScript：按 z-index 编号选择多个元素（在动态 DOM 中）答案

【问题标题】：JavaScript: Select multiple elements by z-index number (in dynamic DOM)JavaScript：按 z-index 编号选择多个元素（在动态 DOM 中）
【发布时间】：2020-09-06 16:57:26
【问题描述】：

我想使用 100% JavaScript 选择 DOM 中具有 z-index = 2147483647 的所有元素 （无 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.

【问题讨论】：

否 @Adriani6 必须是 JavaScript。没有 jQuery
jQuery 是 JavaScript，您只需要转换它 - 这不是一项艰巨的任务。
Javascript 语法请。没有 jQuery 语法
您最初期望将change 事件的处理程序绑定到window 会实现什么？
那么只有现有的change 事件适用于表单字段，当其中的用户输入通过 UI 更改时。您需要在这里使用 MutationObserver 来观察 DOM 变化。

标签： javascript dom z-index

【解决方案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>

【讨论】：

【解决方案2】：

这里有一些东西可以发挥作用，即它必须定位才能获得 z-index。在这里，我展示了一些示例以及如何查找 z-index 不是“自动”的内容；

然后您可以循环列表以找到您想要的 z-index。在这里，我只是推送了 z-index 不是“自动”的所有元素，但您可以使用您选择的索引值在条件中过滤掉这些元素，例如 if (!isNaN(zIndex) && zIndex != "auto" && zIndex == 4042) 用于那些具有 4042 值的元素；

一旦你有了你的元素，你就可以做你想做的事，即为每个元素设置一个事件处理程序。

这专门回答了通过 z-index 查找元素的问题，而不是最终的愿望，这是另一个问题，即如何管理对 DOM 的更改以及添加/删除突变。

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>

【讨论】：

【解决方案3】：

您不能在 css 中选择基于 css 的元素。所以你不能使用querySelectorAll。如果 css 由内联样式属性设置，则此代码有效。下面是代码解释：

使用* 获取所有元素。
把 NodeList 变成一个数组。
过滤掉没有特定css属性的元素。
使用：window.getComputedStyle() 获取 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) {
  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>

注意事项：

window.getComputedStyle() docs
请注意，z-indexed 必须正确定位才能返回 auto 以外的值。

【讨论】：