Question

对于以后阅读此问题的所有读者，该问题已经解决，真正的答案是我在下面提到的答案，但对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方法在让您知道的情况下无法起作用。

Answer 1

这现在可以在IE上使用。谢谢，我不知道该奖励XhulioKondakçiu还是derpirscher，因为

你们两个人帮助我解决了这个问题，所以我要奖励derpirscher，因为derpirscher对我的反应更多。所以这是对我有用的答案。

var divs = [].slice.call(document.querySelectorAll(".x"));

var new_order = divs.reverse();
new_order = new_order.map(function(elem) { return elem.outerHTML;});
document.querySelector('#b').innerHTML = new_order.join('');

#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;
}

<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>-->

Answer 2

似乎Internet Explorer不支持传播语法https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax。

所以要解决您的问题，请不要使用此语法

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

相反，请尝试在此链接https://davidwalsh.name/nodelist-array中进行类似操作。

Answer 3

IE 11不支持扩展语法（[...document.querySelectorAll('.x')]），因为它仅在IE11发布后的ES2015中引入。

为了安全起见，您可以遍历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版本问题，还可以使用Babel将JS代码转换为与IE兼容。

如何在Internet Explorer 11中获得元素的垂直反向顺序脚本

3 个答案: