资讯专栏INFORMATION COLUMN

Dom build

godlong_X / 3161人阅读

摘要:的建立在没有学习函数的封装之前,对于的操作很麻烦以前我们要经常调用元素还有各种方法,当我把一个对象封装起来的话,有些就变得简单了。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80321.html

相关文章

  • 构建React开发环境

    摘要:使用包管理工具,基于构建工具,搭建开发环境由于一些软件安装跟系统环境相关,故这里查看本文档,需要根据自己的系统环境,选择相对应的系统版本。 使用Yarn包管理工具,基于Webpack构建工具,搭建React开发环境 showImg(https://segmentfault.com/img/remote/1460000019833533?w=560&h=310); 由于一些软件安装跟系统...

    yck 评论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...

    孙淑建 评论0 收藏0
  • 回到基础:如何用原生 DOM API 生成表格

    摘要:接下来该填表了生成行和单元格为了填充表格可以遵循同样的方法,但这次我们需要迭代数组中的每个对象。对于每个对象,我们可以使用生成单元格。 翻译:疯狂的技术宅原文:https://www.valentinog.com/bl... 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你推送新鲜的前端技术文章 怎样用原生 JavaScript 生成表格需?本文告诉你答案!...

    Sunxb 评论0 收藏0
  • vue-cli 构建 vue 项目详解

    摘要:打开浏览器输入,会看到构建的项目的主页目录结构使用编辑器打开推荐使用,下面具体看看目录结构在中,根据我们在构建项目的时候的选项,有以下几个命令。 构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度。这...

    JeOam 评论0 收藏0
  • 微前端 —— portal项目

    摘要:前言微前端理论篇上一篇介绍了微前端的理念,本片将开始介绍项目。先实现公共依赖的引入吧。在上一步我们没有引入的依赖包,是因为的依赖包是作为公共依赖导入的。里面全是我的公共依赖文件在下新建文件夹,新建文件,作为我们整个项目的页面文件。 前言 微前端 —— 理论篇 上一篇介绍了微前端的理念,本片将开始介绍portal项目。 portal项目介绍         portal项目包括两个...

    shiguibiao 评论0 收藏0

发表评论

0条评论

godlong_X

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<