Dom build

DOM的創建

在沒有學習函數的封裝以前，對於DOM的操做很麻煩；之前咱們要常常調用元素還有各類方法，當我把一個對象封裝起來的話，有些就變得簡單了。就像一個計算器，加法是基礎的方法，當你想使用乘法的時候，好比5x5；其實就是5個5相加，原本須要調用5次+的方法，而咱們想把加法和加的次數封裝起來，把這個封裝的函數命名的符號爲x；這樣咱們是否減小了許多步驟呢？
接下來，我就分享對象的創建，及封裝。

一 先建立一個對象

//建立一個對象字面量DOMBuilder，其功能爲建立DOM的封裝
var DOMBuilder = {
 }

二 添加方法

var DOMBuilder = {
    //建立方法，傳入參數（tag 標籤 attrs 屬性的數組 children 子元素）
    create:function(tag, attrs, children) {
    }
 }

三 判斷參數

var DOMBuilder = {
    create:function(tag, attrs, children) {
    //若是attrs 未傳輸，默認其爲空對象，以避免報錯; || 或者
    attrs = attrs || {};
    //若是子節點 未傳輸，默認爲空數組
    children = children || [];
    }
 }

四 建立元素併爲其添加屬性

var DOMBuilder = {
    create:function(tag, attrs, children) {
    attrs = attrs || {};
    children = children || [];
    //el 爲建立後的元素
    var el = document.createElement(tag);
    //給元素添加屬性, for in 經常使用於JSON中遍歷對象
        for(var attr in attrs) {
          el.setAttribute(attr,attrs[attr].toString());
        }
    }
 }

五 添加子元素，並判斷元素

var DOMBuilder = {
    create:function(tag, attrs, children) {
    attrs = attrs || {};
    children = children || [];
    var el = document.createElement(tag);
        for(var attr in attrs) {
          el.setAttribute(attr,attrs[attr].toString());
        }
         //給元素添加子元素
        for(var i = 0; i < children.length;i++) {
          //若是是文本，將子節點設置爲文本節點
          if (typeof children[i] == 'string') {
            children[i] = document.createTextNode(children[i]);
          }
          //將子元素添加到el上
          el.appendChild(children[i]);
        }
    }
 }

六 完善函數體，並結合目的來調用

var DOMBuilder = {
      //建立方法 tag 標籤 attrs 屬性的數組 children 子元素
      create:function(tag, attrs, children) {
        //若是attrs 未傳輸，默認其爲空對象，以避免報錯; || 或者
        attrs = attrs || {};
        //若是子節點 未傳輸，默認爲空數組
        children = children || [];
        //el 爲建立後的元素
        var el = document.createElement(tag);
        //給元素添加屬性, for in 經常使用於JSON中遍歷對象
        for(var attr in attrs) {
          el.setAttribute(attr,attrs[attr].toString());
        }
        //給元素添加子元素
        for(var i = 0; i < children.length;i++) {
          //若是是文本，將子節點設置爲文本節點
          if (typeof children[i] == 'string') {
            children[i] = document.createTextNode(children[i]);
          }
          //將子元素添加到el上
          el.appendChild(children[i]);
        }
        return el;
      }
    }

A.咱們給頁面添加一個 h1 的標籤，它的id 爲 h1_title

var h1 = DOMBuilder.create('h1', {id:'h1_title',title:'標題'},['DOMBuilder']);
    document.body.appendChild(h1);

B.咱們建立一個id 爲list 的ul標籤，ul下有一個類名爲item 的li 標籤

var li = DOMBuilder.create('li', {class:'list'},['item']);
    var ul = DOMBuilder.create('ul',{id:'list'},[li]);
    document.body.appendChild(ul);

這是我在SegmentFault發表的第一篇文章，算是新手上路；但我不求你們多多包涵，求你們多多批評！