removeChildren

Напишите функцию removeChildren, которая удаляет всех потомков элемента.

<table>
  <tr>
    <td>Это</td><td>Все</td><td>Элементы DOM</td>
  </tr>
</table>


<script>
  function removeChildren(elem) { /* ваш код */ }

  removeChildren(document.body.children[0]); // очищает таблицу

</script>

Неправильное решение

Решение

Неправильное решение

Для начала рассмотрим забавный пример того, как делать не надо:

function removeChildren(elem) {
  for(var k=0; k<elem.childNodes.length;k++) {
    elem.removeChild(elem.childNodes[k]);
  }
}

Если вы попробуете это на практике, то увидите, то это не сработает.

Не сработает потому, что childNodes всегда начинается 0 и автоматически смещается, когда первый потомок удален(т.е. тот, что был вторым, станет первым), поэтому k пропустит половину узлов.

Решение через DOM

Правильное решение:

function removeChildren(elem) {
   while(elem.lastChild) {
       elem.removeChild(elem.lastChild);
   }
}

Неправильное решение (innerHTML)

Прямая попытка использовать innerHTML была бы неправильной:

function removeChildren(elem) {
  elem.innerHTML = '';
}

Дело в том, что в IE<9 свойство innerHTML на большинстве табличных элементов (кроме ячеек TH/TD) не работает. Будет ошибка.

Верное решение (innerHTML)

Можно, к примеру, завернуть innerHTML в try/catch:

function removeChildren(elem) {
  try {
    elem.innerHTML = '';
  } catch(e) {
    while(elem.firstChild) { 
      elem.removeChild(elem.firstChild);
    }
  }
}

#78

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!