的Javascript DOM變量引用，而不是拷貝

我用下面的代碼從這個answer 的Javascript DOM變量引用，而不是拷貝

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元素的引用。

爲什麼會發生這種行爲？有什麼辦法可以阻止它嗎？

來源

2017-07-26 leofontes

如果你想保持'myOpts'你將不得不改爲拷貝它分配給它的。您正在使用'myOpts = document.getEle ...'，並且使用Javascript，因爲它是一個複雜的類型，所以它將始終由引用來分配。 –

你的假設是錯誤的，任何對DOM元素的引用都只是一個引用，元素不會被複制。 – Teemu

['element.options']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#Properties）被記錄爲對該元素的HTMLOptionsCollection實例的引用。如果您想將該實例中的數據複製到新對象，我可以推薦'Object.assign'嗎？ – Hamms

來完成這兩個簡單的方法是使用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>

來源

2017-07-26 00:55:18 charlietfl

它是通過設計引用DOM中的實際對象。您可以使用<elem>.cloneNode()克隆它，並將其存儲在一個變量中。

來源

2017-07-26 00:49:16 jhpratt

的Javascript DOM變量引用，而不是拷貝

回答

相關問題