Форум

LeD4eG · #1 (**permalink**) 16.10.2012, 23:00

Добрый вечер!
Подставил перед собой следующую банальную на первый взгляд задачу: подсчитать количество дочерних элементов, без знаков возврата каретки (их необходимо удалить). Как известно перевод каретки - это текстовый узел, то есть для следующей разметки:

<div id="block">
   <span>bla</span>
   <span>bla</span>
   <span>bla</span>
</div>

(здесь мы имеем 7 дочерних элементов - 3 элемента span и 4 символа перевода каретки), имеем следующий код:

var childs = document.getElementById('block').childNodes,
       counter = 0; //количество не текстовых узлов
  for(var i = 0; i<childs.length; i++){
    var mythis = childs[i];
    (mythis.nodeType==3)? mythis.parentNode.removeChild(mythis) : ++counter;
  }

Я получаю counter равным 0. если немного модифицировать приведенный выше код:

var childs = document.getElementById('block').childNodes,
       counter = 0; //количество не текстовых узлов
  for(var i = 0; i<childs.length; i++){
    var mythis = childs[i];
    if(mythis.nodeType==3) mythis.parentNode.removeChild(mythis);  
    ++counter;
  }

, получаю counter равным 4 (то есть количество итераций), однако данный код:

var childs = document.getElementById('block').childNodes,
       counter = 0; //количество не текстовых узлов
  for(var i = 0; i<childs.length; i++){
    var mythis = childs[i];
    if(mythis.nodeType==1) ++counter;
  }

, работает верно и выдает counter равным 3.

Объясните, пожалуйста, что я делаю не так?

А также ещё вопрос: почему из цикла я не могу использовать указатель this? (приходится использовать переменную mythis)

Спасибо большое за помощь!

lord2kim · #2 (**permalink**) 16.10.2012, 23:09

LeD4eG,

<div id="block">
   <span>bla</span>
   <span>bla</span>
   <span>bla</span>
</div>
<script>
  var childs = document.getElementById('block').children, //childNodes
       counter = 0; //количество не текстовых узлов
  for(var i = 0; i<childs.length; i++){
    //var mythis = childs[i];
    (childs[i]==3)? "" : ++counter;
  }
alert(counter+"\n"+childs.length);
</script>

LeD4eG · #3 (**permalink**) 16.10.2012, 23:13

то есть Вы просто заменяете пустой строкой возврат каретки?а почему с removeChild() так не выходит?

eirnvn · #4 (**permalink**) 16.10.2012, 23:27

This - для функции, а цикл это не функция у него нет своей области видимости, все переменные в цикле видны в коде, так что mythis это простая переменная в которую записан элемент.

LeD4eG · #5 (**permalink**) 16.10.2012, 23:36

eirnvn, спасибо!понял.

lord2kim · #6 (**permalink**) 16.10.2012, 23:47

LeD4eG, там ничего не заменяется...просто children возвращает список дочерних узлов, без текстовых
http://learn.javascript.ru/traversing-dom

LeD4eG · #7 (**permalink**) 17.10.2012, 00:38

lord2kim, тогда в чём смысл проверки (childs[i].nodeType==3)?

lord2kim · #8 (**permalink**) 17.10.2012, 08:52

LeD4eG, просто показал вам, что такое children

cyber · #9 (**permalink**) 17.10.2012, 09:31

а так не проще?

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
<div id="block">
   <span>bla</span>
   <span>bla</span>
   <span>bla</span>
</div>
    <script>

var elem  = document.body.children[0];
    alert(elem.children.length)  


    </script>

  </body>
</html>

LeD4eG · #10 (**permalink**) 17.10.2012, 13:19

lord2kim,
cyber,
спасибо вам за помощь с пояснением children, однако я хотел закрепить понятия childNodes и removeChild, а тут вылезла эта непонятная ситуация со счётчиком. думал тут найти ответы.

Форум

Справочник

Discord чат

Курсы javascript