Куда делся старый объект?

Question

Я реализовал подпрограмму для сортировки таблицы xhtml на месте, которая основана (= более или менее скопирована из) Николаса С. Закаса, Профессиональный JavaScript для веб-разработчиков , Ch.12. Он работает как рекламируется, но у меня есть несколько вопросов о том, как работает код, и буду благодарен за совет.Вот соответствующие биты:

var oldTable = document.getElementById('myTable');
var oldTableBody = oldTable.tBodies[0];
var oldTableRows = oldTableBody.rows;
var newTableArray = new Array();
for (var i = 0, rowCount = oldTableRows.length; i < rowCount; i++) {
    newTableArray.push(oldTableRows[i]);
}
newTableArray.sort(chooseSort);
var newFragment = document.createDocumentFragment();
for (var i = 0, rowCount = newTableArray.length; i < rowCount; i++) {
    newFragment.appendChild(newTableArray[i]);
}
oldTableBody.appendChild(newFragment);

Я понимаю, что я добавляю указатели к существующим строкам таблицы, когда я помещаю новые значения в newTableArray, но я не уверен, как методы appendChildРабота.В частности:

1. Когда я добавляю каждый из элементов массива (указатели на исходные строки) к фрагменту документа, я просто добавляю указатель (оставляя строку в исходной таблице)или я удаляю объект строки из исходной таблицы, добавляя его куда-то еще?

2. Когда я добавляю newFragment к oldTableBody, если я правильно понимаю, я на самом деледобавляя не фрагмент как объект, а объекты строк, которые я добавил к нему, и именно так работают фрагменты.Это правильно?

3. Когда я добавляю newFragment к oldTableBody, я ничего не делаю, чтобы удалить строки, которые были там изначально.Куда они делись?Удаляет ли добавление их заново автоматически их старые следы, потому что они могут быть прикреплены только один раз?Если я работаю с указателями, а не с самими объектами (что, как я думал, позволило мне прикрепить их к newTableArray, не заставляя их автоматически исчезать из таблицы), означает ли это, что я могу иметь несколько указателей на один и тот же объект?в некоторых случаях (oldTable плюс newTableArray), но не в других (исходные строки в исходной таблице плюс новые отсортированные строки, которые я добавляю)?

Извинения занаивные вопросы, но хотя получение результатов, которые я хочу, приносит удовлетворение, непонимание того, как работает код, вызывает у меня беспокойство.

Answer 1

1. Ваше второе утверждение верно. Вы не создаете указатель, а перемещаете объект во фрагмент документа.

2. Вы правильно понимаете фрагменты документа. Это универсальный контейнер, который никогда не становится частью DOM. Скорее его содержание добавлено.

3. Относится к первому пункту. Вы удалили их из таблицы при добавлении их к фрагменту. При добавлении их в массив, это просто указатель на добавляемые объекты строк. Добавление элементов в Array никак не влияет на сам DOM.

Таким образом, ваш код в конечном итоге:

• выполняет итерацию для ссылки на каждую строку таблицы в массиве
• выполняет итерацию над массивом, чтобы переместить каждую строку во фрагмент документа
• добавление содержимого фрагмента в исходную таблицу

... что не приводит к заметным изменениям в DOM.

Если вы хотели дублировать строки, вас может заинтересовать метод .cloneNode().

Но нет, нельзя отображать один элемент в нескольких разных местах в DOM таким образом, чтобы обновление элемента в одном месте отражалось в других местах.

Answer 2

Я думаю, что все ваши вопросы сводятся к тому, что appendChild делает.Он удаляет элемент с того места, где он находился в DOM, и помещает такой же элемент в новое место.