Dom build

浏览: 145 发布日期: 2016-09-05 分类: sublime-text

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发表的第一篇文章,算是新手上路;但我不求大家多多包涵,求大家多多批评!

返回顶部