DOM操作模块

1、复习选择器模块(选择器模块结束)

  • 目的:学而时习之 复习和总结选择器模块

2、DOM的基本操作方法

  • 目标:回顾DOM操作的基本方法

3.1 DOM操作 -创建节点

  • 练习 1:创建10个 div 并在里面写上 'div 序号' 加到 body 中
创建元素:document.createElement()
创建文本:document.createTextNode();
for(var i = 0; i < 10; i++) {
var dv = document.createElement("div");
var txt = document.createTextNode("div" + (i + 1));
dv.appendChild(txt);
document.body.appendChild(dv);
}
  • 练习 2:在页面中创建 3 个 div, 设置其边框与颜色以及大小
for(var i = 0; i < 3; i++) {
var dv = document.createElement("div");
dv.className = "c"; document.body.appendChild(dv);
}

3.2 创建节点存在的痛点

  • 痛点分析:
1 方法较多需要记忆相关方法完成操作
2 每次循环都使用 appenChild 会导致每次刷新页面结构,性能低
  • 解决思路:
1 封装函数
2 采用临时容器存储 DOM 对象,最后一次性加到 body 中

3.2.1 使用 div 作为容器

  • 缺点:会改变文档的层次结构

3.3 文档片段:DocumentFragment

  • 目标:使用 文档片段 作为临时容器存储目标元素

3.3.1 DocumentFragment解释

  • 理解:可以把文档片段看作一个容器,用来放DOM对象
  • 语法:var df = document.createDocumentFragment();
  • 特点:
在作为 appendChild() 方法参数的时候,被追加的是片段的所有
子节点,而不是片段本身。 使用场景:
创建一个文档片段,然后将创建的DOM元素插入到文档片段中,最后把文档片段插入到DOM树中(实际插入是文档片段的所有子元素)

3.3.2 使用 fragment 作为容器

var i, dv, container = document.createDocumentFragment();
for(i = 0; i < 3; i++) {
dv = document.createElement("div");
dv.className = "c"; container.appendChild(dv);
}
document.body.appendChild(container);

3.4 使用 innerHTML 创建元素

  • 优势:简单方便,通俗易懂
var i, s = "";
for ( i = 0; i < 10; i++ ) {
s += '<div> ' + i + ' </div>';
} document.body.innerHTML = s;

4、简单的性能分析

  • 目标:进行DOM操作的性能分析
var test = function() {
var startTime, endTime,
i = 0, s = ""; startTime = +new Date();
for(; i < 10000; i++) {
s += "<div></div>";
}
document.body.innerHTML = s;
endTime = +new Date(); console.log(endTime - startTime);
};

5、框架中创建元素的实现

  • 目标:实现类似 $("<div></div>") 的功能

5.1 封装 cElem 函数

  • 目标:将 html 字符串转化为 DOM对象
var cElem = function(html) {
var docFrag = document.createDocumentFragment();
var dv = document.createElement("div");
dv.innerHTML = html;
while(dv.firstChild) {
docFrag.appendChild(dv.firstChild);
}
return docFrag;
};

5.2 cElem 创建元素节点函数的一些说明

5.2.1 appendChild的说明

  • 作用:将一个节点插入到指定的父节点的中称为其最后一个子节点
  • 注意:
如果是页面中已经存在的节点,会把它从当前位置移动到新的元素中去。
移除原来的节点,放到新的元素中去。
var srcDv = select("#d1")[0],
tarDv = select("#d2")[0],
cNodes = srcDv.childNodes,
len = cNodes.length, i; for(i = 0; i < len; i++) {
tarDv.appendChild(cNodes[0]);
}

5.2.2 fragment的说明

  • 注意:无法直接给 文档片段 设置 innerHTML

5.3 封装 appendTo 函数

  • 目标:实现追加元素的功能
  • 思路:让函数返回一个自定义对象,用来存储DOM对象和方法
var cElem = function() {
// ...
return {
element: docFrg,
appendTo: function(dom) {
dom.appendChild(this.element);
}
};
};

6、框架整体结构

  • 目标:搭建 itcast 的框架结构 整合数据和方法

6.1 分析jQuery中方法调用规则

6.1.1 回顾jQuery的使用方法

$(html).appendTo()
$(selector).appendTo()
$(DOMObj).appendTo()
$(function() {}) html字符串/选择器/DOM对象/DOM对象数组 。。。 在jQuery中,$ 是一个通用性的函数,会根据传入的不同参数,做不同的处理。
我们需要的就是这么一个 *通用的函数*

6.1.2 $或者jQuery的一些说明

  • 1 函数调用可以获取DOM对象
  • 2 函数调用可以使用jQuery提供的方法
  • 3 函数调用返回的是一个 jQuery对象
  • 4 jQuery方法最终操作的是DOM对象

6.2 创建框架核心函数:itcast

  • 目标:创建自己的 itcast 通用函数

6.2.1 创建框架结构 -返回对象

  • 注意:下面是一些伪代码
  • 劣势:浪费内存
var itcast = function(selector) {
var o = {};
if(selector 是选择器) {
o = select(selector);
} else if(selector 是html字符串) {
o = cElem(selector);
} o.appendTo = function() {};
o.css = function() {};
// ... return o;
};

6.2.2 创建框架结构 -使用构造函数创建对象

  • 目标:将公用的方法或者属性放到原型中
  • 问题:DOM对象放在哪?
var itcast = function(selector) {
return new F(selector);
}; var F = function(selector) {
if(typeof selector === "string") {
if(selector.charAt(0) === "<") {
this.elements = cElem(selector);
}
}
}; F.prototype = {
constructor: F,
appendTo: function(dom) {
dom.appendChild(this.elements);
}
}; // 调用
itcast("<div></div>").appendTo(document.body);

6.2.3 创建框架结构 -改进(修改构造函数)

  • 问题1:一个框架强大与否,与什么有关? 方法
  • 问题2:想让我们的框架变得强大需要给谁添加方法?
  • 问题3:框架在沙箱中的,只暴露itcast如何操作F?
var itcast = function(selector) {
return new itcast.prototype.init(selector);
};
itcast.fn = itcast.prototype = {
constructor: itcast,
init: function(selector) { }
};
itcast.fn.init.prototype = itcast.prototype;

6.3 框架扩展

  • 目标:给框架提供扩展能力而不是修改写好的框架文件
  • 原则:开闭原则(对扩展是开放的,对修改是关闭的)

6.3.1 常用的模块分类

  • 模块:选择 / DOM / 属性 / 样式 / 事件 / 动画

6.3.2 创建 extend 函数

  • 目标:通过此方法实现对框架的扩展
itcast.extend = itcast.fn.extend = function(obj) {
var k;
for(k in obj) {
this[k] = obj[k];
}
};

6.3.3 创建 each 函数

  • 目标:将 each 函数利用扩展添加到框架中
itcast.extend({
each: function(obj, fn) {
var i, len = obj.length;
if( itcast.isLikeArray(obj) ) {
for(i = 0; i < len; i++) {
if( fn.call(obj[i], i, obj[i]) === false ) {
break;
}
}
} else {
for(i in obj) {
if( fn.call(obj[i], i, obj[i]) === false ) {
break;
}
}
}
}
});

6.4 创建模块 -类型判断模块

  • 目标:框架中类型判断使用频率高,给框架添加类型判断模块
  • 解释:
静态成员一般用作工具
静态成员不需要实例化就可以被调用,不会也不可以调用或操纵非静态成员
itcast.extend({
isFunction: function(obj) {
return typeof obj === "function";
},
isString: function(obj) {
return typoef obj === "string";
},
isLikeArray: function(obj) {
return obj && obj.length >= 0;
},
isItcast: function(obj) {
// return !!obj.selector;
return "selector" in obj;
},
isDOM: function(obj) {
return !!obj.nodeType;
}
});

7、创建 appendTo 函数 -完整版

  • 目标:创建一个功能完善的 appendTo 函数完成添加元素的功能

7.1 参数是DOM对象

itcast.fn.extend({
appednTo: function(selector) {
itcast.each(this.elements, function() {
selector.appendChild(this);
});
}
});

7.2 参数是id选择器

itcast.fn.extend({
appednTo: function(selector) {
itcast.each(this.elements, function() {
itcast(selector).elements[0].appendChild(this);
});
}
});

7.3 参数是标签选择器

  • 目标:将多个元素(源)加到多个其他元素(目标)中去
  • 思路:
itcast.fn.extend({
appendTo: function(selector) {
var src = this, tarElem,
tar = itcast(selector); itcast.each(tar.elements, function(tarIndex) {
tarElem = this;
itcast.each(src.elements, function() {
tarElem.appendChild(
tarIndex === tar.elements.length - 1 ?
this:
this.cloneNode(true)
);
});
});
}
}); itcast("<p></p><p></p>").appendTo("div");

8、整合框架代码

  • 目标:使用沙箱模式封装框架,并对外公开 itcast 函数

jQueryDOM操作模块的更多相关文章

  1. jQueryDOM操作模块(二)

    DOM模块 1.优化框架结构 目标:在实现功能基础上优化代码使得框架更简单易用 1.1 简化存储DOM元素的容器 - elements 目标:使用 this 作为容器 1.1.1 使用 element ...

  2. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  3. nodejs零基础详细教程2:模块化、fs文件操作模块、http创建服务模块

    第二章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...

  4. Python:目录和文件的操作模块os.path和OS常用方法

    1.目录和文件的操作模块os.path,在使用之前要先导入:import os.path.它主要有以下几个重要的功能函数: #!/user/bin/python #coding= utf-8 impo ...

  5. python开发学习-day09(队列、多路IO阻塞、堡垒机模块、mysql操作模块)

    s12-20160312-day09 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  6. node.js零基础详细教程(2):模块化、fs文件操作模块、http创建服务模块

    第二章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...

  7. python基础——15(加密、excel操作、ini文件操作、xml操作模块及数据格式分类)

    一.加密模块 1.有解密的加密方式(base64) #base64加密 import base64 str_encrypt = input("输入要加密的字符串:\n") base ...

  8. jQuery 源码解析(二十七) 样式操作模块 坐标详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...

  9. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

随机推荐

  1. Lua的五种变量类型、局部变量、全局变量、lua运算符、流程控制if语句_学习笔记02

    Lua的五种变量类型.局部变量.全局变量 .lua运算符 .流程控制if语句 Lua代码的注释方式: --当行注释 --[[    多行注释    ]]-- Lua的5种变量类型: 1.null 表示 ...

  2. 11.7 【Linq】在查询表达式和点标记之间作出选择

    11.7.1 需要使用点标记的操作 最明显的必须使用点标记的情形是调用 Reverse . ToDictionary 这类没有相应的查询表达式语法的方法.然而即使查询表达式支持你要使用的查询操作符,也 ...

  3. LINUX KERNEL SPINLOCK使用不当的后果

    LINUX KERNEL SPINLOCK使用不当的后果 spinlock(自旋锁)是内核中最常见的锁,它的特点是:等待锁的过程中不休眠,而是占着CPU空转,优点是避免了上下文切换的开销,缺点是该CP ...

  4. Skyline Web 端数据浏览性能优化

    三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分 ...

  5. String使用方式详细总结

    1.用双引号创建 2.用new String方式创建 3.双引号相加创建 4.两个new String相加时 5.两个引用相加时 6.双引号加new String创建或者new String加双引号创 ...

  6. 渗透实战(周四):CSRF跨站域请求伪造

    上图是广东外语外贸大学北校区内MBA中心旁边酒店房间的Wi-Fi网络环境,假设我们的Kali攻击机连入到SSID为414(房间号)的Wi-Fi网络,其IP地址:192.168.43.80 .同一Wi- ...

  7. dubbo-刷一遍用户指南(三)

    想更好的使用dubbo,最好刷几遍用户指南,dubbo用户指南几乎包含了所有dubbo所有的特性 用户指南地址:https://dubbo.gitbooks.io/dubbo-user-book/de ...

  8. asp怎么实现二级联动下拉菜单

    rs为一级栏目的记录集 rs2为二级栏目的记录集 分别替换成你自己的记录集名称就好了 <script language="JavaScript"> var onecou ...

  9. LaTeX的简单使用方法

    先来一个总结得比较好的https://blog.csdn.net/garfielder007/article/details/51646604 1.普通公式 $公式不换行$ $公式不换行$ $$公式独 ...

  10. Solr部分更新MultiValued的Date日期字段时报错及解决方案:Invalid Date String:'Mon Sep 14 01:48:38 CST 2015'

    问题描述如标题. 异常信息如下: Result Caused by: org.apache.solr.common.SolrException: Invalid Date String:'Mon Se ...