2017-02-15 3 views
-2

Пусть предположим, что мы имеем:Untied переменных от объекта DOM

Let myVar = document.getElementbyId("Sample")

Как я могу обработать/изменить значение в переменном яваскрипте myVar, не затрагивая больше объекта DOM?

В любое время я делаю что-то вроде: myVar.value = myVar.value + 100; DOM также изменен, так как myVar представляет объект DOM, а не только поймал его значение.

Заранее спасибо.

$('#btn').click(function(ev) { 
 
    var a = document.getElementById("myInput") 
 
    var b = a 
 
    b.value = "Why DOM changed?"; 
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<html> 
 
    <label>Original input value </label> 
 
    <br> 
 
<input type="text" id="myInput" value="55"/> 
 
<button id="btn">Modify Variable - NOT DOM Obj</button> 
 
</html>

+1

* В любое время я сделать что-то вроде: 'myVar2 = MYVAR + 100;' DOM-меняется тоже, так как MYVAR является представляющая объект DOM, а не только уловили его значение. * - Нет, ** это полная противоположность. ** 'myVar' даже не объект DOM - это просто значение объекта DOM, примитива ... – Li357

+0

Хорошо, я редактировал вопрос. – Ruben

+0

Это еще не так, как вы говорите. Возможно ли, что вы написали 'myVar.value + = 100'? Это присваивает свойство '.value'. – Barmar

ответ

0

Ну, я обнаружил, что любая переменная в JavaScript, который присваивается массив или объект (например, как элементы DOM) только ссылки на исходный массив или объект, не имеющий самостоятельного значения.

Вот почему любые изменения, которые я сделал для Myvar, повлияли на DOM. То, что я сделал для решения проблемы, - это clone объект в переменную. Я сделал это с помощью функции подчеркивания:

myVar = ._clone(document.getElementbyId("Sample"))

Теперь я могу манипулировать MYVAR, не затрагивая DOM.
Я нашел ответ здесь: Copying array by value in JavaScript

0

From MDN on HTMLInputElement:

значение: строка: Возврат/Устанавливает текущее значение элемента управления.

Это просто. Если вы не хотите изменять DOM, то не установить атрибут value вашего HTMLInputElement. Вместо этого сохраните его в другой переменной и впоследствии измените.

var myInput = document.getElementById('myInput'); 
myInput.value = myInput.value + 100; // this is where the "issue" exists 

// instead... 
var inputValue = myInput.value; 
inputValue = inputValue + 100; // DOM does not reflect the change 
+0

Вы правы.Возможно, что я пытаюсь сделать, это получить копию объекта DOM в переменной и изменить некоторые атрибуты, сохраняя структуру объекта внутри var. Независимо от того, сколько переменных переменных я использую, DOM все еще затрагивает. – Ruben

+0

Это потому, что они по ссылке. В вашем обновлении 'b' указывает на тот же элемент, что и' a'. – chazsolo

+0

Я знаю, моя точка зрения: есть способ поймать объект в «независимой» переменной, не привязанной к DOM? Мне нужно только изменить структуру объекта для другого шаблона, а не текущего. – Ruben

Смежные вопросы