逛奔的蜗牛

这两个属性返回的都是直接孩子，即下某元素的下一层结点，而不是所有的子孙。

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'));