Ссылка HTML элементы JS объекты

Когда я динамически создать элемент с помощью JQuerys:Ссылка HTML элементы JS объекты

$("<div>",{id : "list"}).html("hello").appendTo("body");

и создать объект JS с помощью:

var obj = {el : document.querySelector("#list") }

консоль возвращает следующее при печати obj.el, как ожидалось:

<div id="list">hello</div>

Теперь я могу установить контент, используя obj.el.innerHTML = "foo";После удаления элемента с помощью:

$("#list").remove();

Элемент остается в объекте OBJ созданных ранее. Печать obj.el все еще возвращает: <div id="list">hello</div>

Прежде всего, почему это так? Есть ли способ сохранить предпочтение элементу без сохранения сложного вложенного селектора CSS, который замедлит работу?

источник

2015-10-18 tlaloc

Вы удаляете из DOM, а не объект. Вам все равно нужно удалить (удалить) объект из объекта 'window', используя' delete obj' –

Консоль может использовать кеш, чтобы показать удаленный элемент. Чтобы убедиться, что она удалена, попробуйте снова обратиться к элементу. Это должно привести к определенной ошибке. – jeff

@jeff Повторное использование элемента не вызывает ошибки. Консоль Chromes позволяет без проблем изменять содержимое элементов. Затем элемент можно выводить с помощью нового содержимого с помощью консоли ... Я надеялся на что-то вроде typeof (obj.el) == «undefined» после удаления элемента из DOM. – tlaloc

Прочтите этот небольшой пример, который, я думаю, может вам помочь.

// it would be in you code : $("<div>",{id : "list"}).html("hello").appendTo("body"); 
 
var obj = { 
 
    a : 5 
 
}; 
 

 
// let me create this object to better undersatnding 
 
var obj2 = { 
 
    a : 3 
 
}; 
 

 
document.write(obj.a + "<br>"); // 5 
 
document.write(obj2.a + "<br>"); // 3 
 

 

 
// it would be in you code :var obj = {el : document.querySelector("#list") } 
 
obj2.a = obj.a; // 
 

 

 
document.write(obj2.a + "<br>"); // 5 
 

 
//it would be in you code : $("#list").remove(); 
 
delete obj.a; 
 

 
// here we still have something for obj2 
 
document.write(obj2.a + "<br>"); // 5 
 

 
// try again : 
 
obj2.a = obj.a; 
 
document.write(obj2.a + "<br>"); // undefined

В вас случае, если вы пытаетесь:

$("#list").remove(); 
var obj = {el : document.querySelector("#list") }

Я думаю, что OBJ будет неопределенным!

источник

2015-10-18 11:54:31 Anonymous0day

Спасибо за пример! Часть, которую я не получаю, - это то, почему JS будет хранить весь HTML-элемент в объекте, если он уже существует в DOM. Почему бы не создать ссылку? Есть ли способ достичь именно этого? – tlaloc

это именно то, что он делает! это ссылка на объект, а не на объект Dom! – Anonymous0day

@tlaloc очень хорошая страница обо всех этих вещах: [Управление памятью] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management), особенно в вашем случае «Сбор мусора» – Anonymous0day

Вы можете использовать геттер и сеттер для свойства el. Вместо сохранения элемента в el, заполняйте значение el при его доступе.

Объект сос станет

var obj = { 
    get el(){ 
    return document.querySelector("#list"); 
    } 
}

Here это пример, который может помочь вам.

источник

2015-10-18 12:07:51

Ссылка HTML элементы JS объекты

ответ

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