逛奔的蝸牛

這兩個(gè)屬性返回的都是直接孩子，即下某元素的下一層結(jié)點(diǎn)，而不是所有的子孫。

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

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

    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); // 復(fù)制結(jié)點(diǎn)
            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'));