Javascript DOM 变量是引用而不是复制

Question

我正在使用此 answer 中的以下代码

var myOpts = document.getElementById('yourselect').options;
console.log(myOpts);
//prints HTMLOptionsCollection [ <option>, <option>, <option>, <option>, <option> ]

现在，在我已经将选择的内容存储在变量中之后，我使用 jQuery 来清空选择:

$('#yourselect').empty();
console.log(myOpts);
//prints HTMLOptionsCollection { length: 0, selectedIndex: -1 }

令我惊讶的是，变量也是空的。我的理解是该变量是一个副本，而不是对 DOM 元素的引用。

为什么会发生这种行为？有什么办法可以预防吗？

Answer 1

实现两者的简单方法是使用 jQuery detach()

var $opts = $('#mySelect option').detach();

console.log('Stored options =', $opts.length)
console.log('Active options =',  $('#mySelect option').length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option> 
</select>