JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

// какие-либо другие узлы, отличные от элементов <tr>, эти узлы "всплывут" наверх.

for(var і = 0; і < rows.length; i++) tbody.appendChild(rows[i]);

}

// Отыскивает в таблице элементы <th> (предполагается, что в таблице существует

// только одна строка с ними) и добавляет в них возможность обработки щелчка мышью,

//

чтобы щелчок на заголовке столбца вызывал сортировку таблицы по этому столбцу.

function makeSortable(table) {

var headers = table.getElementsByTagName("th");

for(var і = 0; і < headers.length; i++) {

(function(n) { // Чтобы создать локальную область видимости

headers[i].onclick = function { sortrows(table, n); };

}(i)); // Присвоить значение і локальной переменной n

}

}

15.6.3. Удаление и замена узлов

Метод

removeChild

удаляет элемент из дерева документа. Но будьте внимательны: этот метод вызывается не относительно узла, который должен быть удален, а (как следует из фрагмента «child» в его имени) относительно родителя удаляемого узла. Этот метод вызывается относительно родителя и принимает в виде аргумента дочерний узел, который требуется удалить. Чтобы удалить узел n из документа, вызов метода должен осуществляться так:

n.parentNode.removeChild(n);

Метод

replaceChild

удаляет один дочерний узел и замещает его другим. Этот метод должен вызываться относительно родительского узла. В первом аргументе он принимает новый узел, а во втором - замещаемый узел. Например, ниже показано, как заменить узел n текстовой строкой:

n.parentNode.replaceChild(document.createTextNode("[ ИСПРАВЛЕНО ]"). n);

Следующая функция демонстрирует еще один способ применения метода

replaceChild:

// Замещает узел n новым элементом <b> и делает узел п его дочерним элементом,

function embolden(n) {

// Если вместо узла получена строка, интерпретировать ее как значение

// атрибута id элемента

if (typeof n == "string") n = document.getElementByld(n);

var parent = n.parentNode; //

Ссылка на родителя элемента n

var b = document.сreateElement("b"); // Создать элемент <b>

parent.replaceChild(b, n); // Заменить n элементом <b>

b.appendChild(n); // Сделать n дочерним элементом элемента <b>

}

В разделе 15.5.1 было представлено свойство

outerHTML

элементов и говорилось, что оно не реализовано в текущей версии Firefox. Пример 15.5 демонстрирует, как можно реализовать это свойство в Firefox (и в любом другом броузере, поддерживающем свойство

innerHTML

, позволяющем расширять объект-прототип

Element.prototype

и имеющем методы определения методов доступа к свойствам). Здесь также демонстрируется практическое применение методов

removeChild

и

cloneNode.

Пример 15.5. Реализация свойства outerHTML с помощью свойства innerHTML

И Реализация свойства outerHTML для броузеров, не поддерживающих его.

// Предполагается, что броузер поддерживает свойство innerHTML, возможность

// расширения Element.prototype и позволяет определять методы доступа к свойствам.

(function {

// Если свойство outerHTML уже имеется - просто вернуть управление

if (document.createElement("div").outerHTML) return;

// Возвращает окружающую разметку с содержимым элемента,

// на который указывает ссылка this

function outerHTMLGetter {

var container = document.createElement("div");

// Фиктивный элемент

container.appendChild(this.cloneNode(true)); // Копировать this

// в фиктивный элемент

return container.innerHTML; // Вернуть содержимое

// фиктивного элемента

}

// Замещает указанным значением value содержимое элемента, на который

// указывает ссылка this, вместе с окружающей разметкой HTML