Общее представление о DOM. Часть 4

Клонирование элементов

Вместо того, чтобы создавать каждый раз новые узлы, вы можете клонировать уже существующие узлы, используя метод cloneNode(), доступный для каждого узла. Клонировать можно только сам узел и его атрибуты или же все порожденные им узлы (а также все порожденные ими узлы и т.д.). Если указать логическое значение true в качестве параметра метода cloneNode(), то клонируются и порожденные узлы (это так называемая детальная копия). А если указать логическое значение false, то клонируется только сам узел.

<script type="text/javascript">
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(). Нужно лишь указать новый и старый узел, а все остальное будет сделано автоматически. Следует, однако, иметь в виду, что данный метод вызывается из элемента, который является родительским по отношению к новому и старому узлу!

<script type="text/javascript">
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 и даже предоставить новые подэлементы:

<script type="text/javascript">
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 в один элемент.

Оставьте свой отзыв