DOM的竖立

在没有进修函数的封装之前，关于DOM的操纵很贫苦；之前我们要常常挪用元素另有种种要领，当我把一个对象封装起来的话，有些就变得简朴了。就像一个计算器，加法是基本的要领，当你想运用乘法的时刻，比方5×5；实在就是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宣布的第一篇文章，算是新手上路；但我不求人人多多见谅，求人人多多指摘！