逛奔的蝸牛

這兩個屬性返回的都是直接孩子，即下某元素的下一層結點，而不是所有的子孫。

children只返回元素如input, span, script, div等，不會返回TextNode，注釋
childNodes只但會返回元素，還會返回TextNode，注釋等。所以操作的時候使用children更多一些。

使用：
如document.appendChild只能添加Element對象，而不能直接使用"<input type='text'>"這樣的字符串直接添加結點。但是利用DocumentFragment和childNodes可以很容易的實現添加此種類型的結點：

    var nd = {}
    nd.Fragment = function() {
      this.initialize(arguments);
    }
    nd.Fragment.prototype = {
      initialize: function() {
        this._frag = document.createDocumentFragment();
        this._nodes = [];
      },
      appendSource: function(source) {
        var div = document.createElement('div');
        div.innerHTML = source;
        for (var i=0; i < div.childNodes.length; i++) {
          var node = div.childNodes[i].cloneNode(true); // 復制結點
            console.log(div.childNodes[i].parentNode);
          this._nodes.push(node);
          this._frag.appendChild(node);
        };
      },
      appendTo: function(element) {
        if (element) {
          element.appendChild(this._frag); // 添加到指定的元素中
        }
      },
      reclaim: function() {
        for (var i=0; i < this._nodes.length; i++) {
          var node = this._nodes[i];
          this._frag.appendChild(node);
        };
      }
    }
   
    var frag = new nd.Fragment();
    frag.appendSource(
    "<table>"
        + "<tr><td>Hello</td></tr>"
        + "<tr><td>Biao</td></tr>"
        + "<tr><td>Bin</td></tr>"
    + "</table>"
    );
   
    frag.appendTo(document.getElementById('container'));