Общее представление о DOM. Часть 4
Клонирование элементов
Вместо того, чтобы создавать каждый раз новые узлы, вы можете клонировать уже существующие узлы, используя метод cloneNode(), доступный для каждого узла. Клонировать можно только сам узел и его атрибуты или же все порожденные им узлы (а также все порожденные ими узлы и т.д.). Если указать логическое значение true в качестве параметра метода cloneNode(), то клонируются и порожденные узлы (это так называемая детальная копия). А если указать логическое значение false, то клонируется только сам узел.
var nr = 1;
function addItem(cloneMode) {
var list = document.getElementById("list");
var oldItem = list.firstChild;
var newItem = oldItem.cloneNode(cloneMode);
list.appendChild(newItem);
}
</script>
<ul id="list"><li><a href="http://www.samspublishing.com/">Item 1</a></li></ul>
<input type="button" onclick="addItem(true);" value="Clone all" />
<input type="button" onclick="addItem(false);" value="Clone node only" />
После щелчка на первой кнопке клонируется весь узел, включая такие подэлементы, как ссылка и текстовое обозначение элемента списка. А после щелчка на второй кнопке клонируется только сам узел, формируя новый, хотя и пустой элемент списка.
Замена элементов
Если требуется удалить узел, а затем вставить новый узел на том же месте, наиболее рационально это можно сделать с помощью метода replaceChild(). Нужно лишь указать новый и старый узел, а все остальное будет сделано автоматически. Следует, однако, иметь в виду, что данный метод вызывается из элемента, который является родительским по отношению к новому и старому узлу!
var nr = 1;
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
nr++;
var newTextNode = document.createTextNode("Item " + nr);
newNode.appendChild(newTextNode);
list.replaceChild(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Replace item" />
Изменение фрагментов кода HTML
При изменении текстовых узлов (путем замены или с помощью свойства nodeValue) меняется лишь конкретный текст, но не целые фрагменты кода HTML, включая и подэлементы. В последнем случае может оказаться полезным свойство innerHTML каждого элемента. Несмотря на то, что свойство InnerHTML не стандартизировано, оно вполне работоспособно. С помощью этого свойства можно изменить любой элемент HTML и даже предоставить новые подэлементы:
var nr = 1;
function addItem() {
var list = document.getElementById("list");
nr++;
var newNode = "<li>Item " + nr + "</li>";
list.innerHTML += newNode;
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Add item" />
Итак, вместо ясного, но неудобного подхода DOM свойство innerHTML просто записывает код HTML в один элемент.
Оставьте свой отзыв