Dom build

godlong_X 發布于2019-08-20 10:47 / 3162人閱讀

摘要：的建立在沒有學習函數的封裝之前，對于的操作很麻煩以前我們要經常調用元素還有各種方法，當我把一個對象封裝起來的話，有些就變得簡單了。

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發表的第一篇文章，算是新手上路；但我不求大家多多包涵，求大家多多批評！

GPU云服務器云服務器 Buildings building Build webrtc build

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80321.html

構建React開發環境

摘要：使用包管理工具，基于構建工具，搭建開發環境由于一些軟件安裝跟系統環境相關，故這里查看本文檔，需要根據自己的系統環境，選擇相對應的系統版本。使用Yarn包管理工具，基于Webpack構建工具，搭建React開發環境 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 由于一些軟件安裝跟系統...

yck 2019-08-26 10:15 評論0 收藏0
快速搭建 webpack + react 環境

安裝首先你需要點擊這里安裝 nodejs（npm）。然后執行：建立一個目錄作為項目根目錄并初始化： mkdir react-webpack cd react-webpack/ npm init 安裝相關組件這里包括了本文所需要的全部組件 npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-serve...

孫淑建 2019-08-23 11:52 評論0 收藏0
回到基礎：如何用原生 DOM API 生成表格

摘要：接下來該填表了生成行和單元格為了填充表格可以遵循同樣的方法，但這次我們需要迭代數組中的每個對象。對于每個對象，我們可以使用生成單元格。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章怎樣用原生 JavaScript 生成表格需？本文告訴你答案！...

Sunxb 2019-08-26 13:34 評論0 收藏0
vue-cli 構建 vue 項目詳解

摘要：打開瀏覽器輸入，會看到構建的項目的主頁目錄結構使用編輯器打開推薦使用，下面具體看看目錄結構在中，根據我們在構建項目的時候的選項，有以下幾個命令。構建一個 vue 項目最簡單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有自己的腳手架工具，其作用就是用配置好的模板迅速搭建起一個項目工程來，省去自己配置 webpack 配置文件的基本內容，大大降低了初學者構建項目的難度。這...

JeOam 2019-08-23 14:59 評論0 收藏0
微前端 —— portal項目

摘要：前言微前端理論篇上一篇介紹了微前端的理念，本片將開始介紹項目。先實現公共依賴的引入吧。在上一步我們沒有引入的依賴包，是因為的依賴包是作為公共依賴導入的。里面全是我的公共依賴文件在下新建文件夾，新建文件，作為我們整個項目的頁面文件。前言微前端 —— 理論篇上一篇介紹了微前端的理念，本片將開始介紹portal項目。 portal項目介紹 ????????portal項目包括兩個...

shiguibiao 2019-08-26 10:32 評論0 收藏0