javascript – 如何在Internet Explorer 11中使用这个垂直相反的元素脚本顺序

对于任何未来的读者来说,这个问题已经解决了,真正的答案就是我在下面提到的答案,但得到的回答是derpirscher.

没有这个脚本,元素顺序看起来像这样

A
B
C
D

这就是我想要的,所以使用这个脚本,例如,目标元素以相反的顺序看起来像这样

D
C
B
A

我得到这个脚本可以在除了Internet Explorer 11之外的所有其他浏览器中工作

但在IE中我一般都会收到此错误

SCRIPT1002:语法错误

1.html(57,13)

根据提供更多错误细节的链接,它说明了这一点

语法错误(JavaScript)

You created a statement that violates one or more of the grammatical rules of JavaScript.

它引用了这一行

var divs = [...document.querySelectorAll('.x')];

这是我的代码

<style>
#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}
</style>

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

<script>
var divs = [...document.querySelectorAll('.x')];
var new_order = divs.reverse();
new_order = new_order.map(elem => elem.outerHTML);
document.querySelector('#b').innerHTML = new_order.join('');
</script>

那么如何让它在Internet Explorer 11中运行呢？
你们可以建议的任何方法我都会非常感激,请不要提出任何与CSS相关的内容我知道有CSS方法可以

导致这种效果,但遗憾的是那些CSS方法在某些浏览器或旧浏览器上不起作用我注意到一种JavaScript方法对我来说在那些CSS方法无法工作的浏览器上让你们知道.

解决方法

IE 11不支持扩展语法([… document.querySelectorAll(‘.x’)]),因为这只是在ES1115中引入的,这是IE11发布后的方式.

为了安全起见,您可以迭代NodeList并将项目添加到您的阵列.

var nl = document.querySelectorAll('.x');
var divs = [];
for (var i = 0; i < nl.length; i++) divs.push(nl[i]);

或者(因为NodeList在某种程度上类似于数组,但缺少阵列上定义的大多数函数),您可以调用

var divs = Array.prototype.slice.call(document.querySelectorAll('.x'));

编辑

看起来,您不仅仅有一个JS-Version问题,您还可以使用Babel将您的JS代码翻译为IE兼容.