Dom build

godlong_X 發(fā)布于2019-08-20 10:47 / 3173人閱讀

摘要：的建立在沒(méi)有學(xué)習(xí)函數(shù)的封裝之前，對(duì)于的操作很麻煩以前我們要經(jīng)常調(diào)用元素還有各種方法，當(dāng)我把一個(gè)對(duì)象封裝起來(lái)的話，有些就變得簡(jiǎn)單了。

DOM的建立

在沒(méi)有學(xué)習(xí)函數(shù)的封裝之前，對(duì)于DOM的操作很麻煩；以前我們要經(jīng)常調(diào)用元素還有各種方法，當(dāng)我把一個(gè)對(duì)象封裝起來(lái)的話，有些就變得簡(jiǎn)單了。就像一個(gè)計(jì)算器，加法是基礎(chǔ)的方法，當(dāng)你想使用乘法的時(shí)候，比如5x5；其實(shí)就是5個(gè)5相加，本來(lái)需要調(diào)用5次+的方法，而我們想把加法和加的次數(shù)封裝起來(lái)，把這個(gè)封裝的函數(shù)命名的符號(hào)為x；這樣我們是否減少了許多步驟呢？
接下來(lái)，我就分享對(duì)象的建立，及封裝。

一先創(chuàng)建一個(gè)對(duì)象

//創(chuàng)建一個(gè)對(duì)象字面量DOMBuilder，其功能為創(chuàng)建DOM的封裝
var DOMBuilder = {
 }

二添加方法

var DOMBuilder = {
    //創(chuàng)建方法，傳入?yún)?shù)（tag 標(biāo)簽 attrs 屬性的數(shù)組 children 子元素）
    create:function(tag, attrs, children) {
    }
 }

三判斷參數(shù)

var DOMBuilder = {
    create:function(tag, attrs, children) {
    //如果attrs 未傳輸，默認(rèn)其為空對(duì)象，以免報(bào)錯(cuò); || 或者
    attrs = attrs || {};
    //如果子節(jié)點(diǎn) 未傳輸，默認(rèn)為空數(shù)組
    children = children || [];
    }
 }

四創(chuàng)建元素并為其添加屬性

var DOMBuilder = {
    create:function(tag, attrs, children) {
    attrs = attrs || {};
    children = children || [];
    //el 為創(chuàng)建后的元素
    var el = document.createElement(tag);
    //給元素添加屬性, for in 常用于JSON中遍歷對(duì)象
        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++) {
          //如果是文本，將子節(jié)點(diǎn)設(shè)置為文本節(jié)點(diǎn)
          if (typeof children[i] == "string") {
            children[i] = document.createTextNode(children[i]);
          }
          //將子元素添加到el上
          el.appendChild(children[i]);
        }
    }
 }

六完善函數(shù)體，并結(jié)合目的來(lái)調(diào)用

    var DOMBuilder = {
      //創(chuàng)建方法 tag 標(biāo)簽 attrs 屬性的數(shù)組 children 子元素
      create:function(tag, attrs, children) {
        //如果attrs 未傳輸，默認(rèn)其為空對(duì)象，以免報(bào)錯(cuò); || 或者
        attrs = attrs || {};
        //如果子節(jié)點(diǎn) 未傳輸，默認(rèn)為空數(shù)組
        children = children || [];
        //el 為創(chuàng)建后的元素
        var el = document.createElement(tag);
        //給元素添加屬性, for in 常用于JSON中遍歷對(duì)象
        for(var attr in attrs) {
          el.setAttribute(attr,attrs[attr].toString());
        }
        //給元素添加子元素
        for(var i = 0; i < children.length;i++) {
          //如果是文本，將子節(jié)點(diǎn)設(shè)置為文本節(jié)點(diǎn)
          if (typeof children[i] == "string") {
            children[i] = document.createTextNode(children[i]);
          }
          //將子元素添加到el上
          el.appendChild(children[i]);
        }
        return el;
      }
    }

A.我們給頁(yè)面添加一個(gè) h1 的標(biāo)簽，它的id 為 h1_title

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

B.我們創(chuàng)建一個(gè)id 為list 的ul標(biāo)簽，ul下有一個(gè)類(lèi)名為item 的li 標(biāo)簽

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

這是我在SegmentFault發(fā)表的第一篇文章，算是新手上路；但我不求大家多多包涵，求大家多多批評(píng)！