Как я могу получить этот вертикальный обратный порядок элементов скрипта, работающего в Internet Explorer 11

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 11 не поддерживает расширенный синтаксис ([...document.querySelectorAll('.x')]), потому что он был введен только в ES2015, который был намного позже выпуска 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'));

EDIT

Кажется, у вас более одной версии JSвы также можете использовать Babel , чтобы перевести ваш код JS для обеспечения совместимости с IE.

Answer 2

Теперь это работает в IE.Спасибо, ребята, я не знаю, должен ли я наградить Ксюлио Кондакчу или Дерпиршера, потому что двое из вас помогли мне решить эту проблему, поэтому я собираюсь наградить Дерпиршера, потому что Дерпиршер отвечал мне больше.Вот мой ответ, который сработал для меня.

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 3

Похоже, что 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.