dom对象

今天 ,Web 组件已经从本质上改变了HTML。初次接触时，它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力，可以自由的进行定制组件。面对新的技术，你可能会觉得无从下手。那这篇文章将为你揭开Web组件神秘的面纱。如果你已经熟知HTML标签和DOM编程，已经拥有了大量可用的Web组件，那么你已经是Web组件专家了。 Web 组件的现状 随着各式各样的用户需求，浏览器的原生组件已经无法满足需求。Web组件也就变得越来越重要。 我们将以自定义一个传统三方插件为例来介绍Web组件。 首先，需要引用插件的CSS和JavaScript资源： <link rel="stylesheet" type="text/css" href="my-widget.css" /> <script src="my-widget.js"></script> 接下来，我们需要向页面中添加占位符。 <div data-my-widget></div> 最后，我们需要使用脚本来找到并且实例化这个占位符为Web组件。 // 使用 jQuery 初始化组件 $(function() { $('[data-my-widget]').myWidget(); }); 通过以上是三个基本步骤。已经完成了在页面中添加了自定义插件，但是浏览器无法确定自定义组件的生命周期

前端组件化这个主题相关的内容已经火了很久很久，angular 刚出来时的 Directive 到 angular2 的 components ，还有 React 的 components 等等，无一不是前端组件化的一种实现和探索，但是提上议程的 Web Components 标准是个怎样的东西，相关的一些框架或者类库，如 React，Angular2，甚至是 x-tag，polymer 现在实现的组件化的东西和 Web Components 标准差别在哪里？我花时间努力地把现有的 W3C Web Components 文档看了下，然后坚强地写下这些记录。 首先我们需要知道，Web Components 包括了四个部分： Custom Elements HTML Imports HTML Templates Shadow DOM 这四部分有机地组合在一起，才是 Web Components。 可以用自定义的标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。 下边分别是每一部分的笔记内容。 Custom Elements 概述 Custom Elements 顾名思义，是提供一种方式让开发者可以自定义 HTML 元素，包括特定的组成，样式和行为。支持 Web

前端优化的主要方面就是减少页面的DOM操作，减少重排和重绘，React在这方面做了优化，采用了所谓的虚拟DOM，其实我们平时也会遇到虚拟DOM，只是你没有注意罢了，请听我娓娓道来。 所谓的虚拟DOM就是JavaScript对象，就是在没有真实渲染DOM之前做的操作，给你举几个例子来看看： （1）createElement（'Button'） 这就创建了一个虚拟的button，为啥？因为没有插入到实际页面中去，这就是虚拟DOM！ （2）DocumentFragment（文档碎片 ） 创建虚拟的节点，一次性插入页面结构 方法:使用DocumentFragment=====>>>>>>是一个占位符，把它插入节点的时候是插入它所有的子节点，本身不会插入 举个例子来说： var frag=document.createDocumentFragment(); for(var i=0;i<10;i++){ var l=document.createElement("li"); l.innerHTML="ss"; frag.appendChild(l); } document.getElementById("list").appendChild(frag); React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法

几种实现双向绑定的做法： 目前几种主流的mvc(vm)框架都实现了单项数据绑定，而我所理解的双向数据绑定，无非就是在单项数据绑定的基础上给输入元素input textare等添加了change（input）事件，来动态修改model和view,并没有多高深。所以无须介怀是实现的单项或者双向绑定,实现数据绑定 大致几种： 发布者-订阅者（backbone.js）; 一般通过sub,pub的方式实现数据和视图的绑定监听，更新数据的方式通常是 vm.set('property',vlue); 脏值检查（angular.js）; Angular.js是通过脏值检测的方式比对数据是否有变更。来决定是否更新视图，最简单方式是通过setinterval()定时轮询检测数据变动，当然angular只是在指定的事件触发时进入脏值检测： Ng-click $http $location $timeout $interval $digest()||$apply() 数据劫持（vue.sj）; Vue.js则采用数据劫持+发布者订阅者模式的方式，通过0bject.defineProperty()来劫持各个属性的setter getter，在数据发生改变时发布消息给订阅者，触发相应的监听回调。具体整理： vue是通过数据劫持的方式来做数据绑定，其中核心方法是通过object,defineProperty(

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

Web前端技术由 html、css和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

DOM，Document Object Model的简称，文档对象模型。是一套规范文档内容的通用型标准。它是中立于平台和语言的接口，它允许程序脚本动态地访问和更新文档的内容，结构和样式。简单来说，dom就是一个对网页进行增删改查的操作。 HTML DOM 模型被构造为对象的树。 DOM查找 var elem=document.getElementById();//根据ID属性查找 var elem=document.getElementsByClassName();//根据class属性 var elem=document.getElementsByName()//根据name属性查找 var elem=document.getElementsByTagName()//根据标签名获取标签合集 使用CSS查找 var elem=document.querySelector(); //返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。 var elem=document.querySelectorAll(); //返回文档中匹配到指定的元素或CSS选择器的对象集合。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #code{

上一篇博文距离现在已经四 个月了，一直想写些什么无奈工作比较忙碌。我的恩师老王在毕业聚餐那天带着一声酒气告诉我一定要把博客坚持写下去，所以今天下决心要开始这个新的篇章。 之所以想要从头写一个关于JavaScript的系列是由于以下几个原因： 1.JavaScript是Web程序员的核心技术 2.很多人会使用JQuery写不错的特效却对JS中的继承、原型了解不多，本文旨在让本菜和大家一起提升“内力”，毕竟内力深厚了将来的武功造诣才会高 3.本菜在写博文的同时会不断的学习JS中不了解的东西，与大家一同成长 废话到此为止，首先介绍几位JS鼻祖： 布兰登·艾奇（Brendan Eich，1961年～），JavaScript之父 Douglas Crockford ，JavaScript一代宗师 John Resig ，JQuery创始人 JavaScript历史： 　　 JavaScript 诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的 Netscape （网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于

首先，我们先看下jQuery是怎么用的，如下: let a = $('p'); a.css('color', 'red'); a.html(); a.value(); 简单实现zepto原型： var zepto = {}; zepto.init = function (selector) { var slice = Array.prototype.slice; var dom = slice.call(document.querySelectorAll(selector)); return zepto.Z(dom, selector); } function z(dom, selector) { var i, length = dom ? dom.length : 0 for (i = 0; i < length; i++) { this[i] = dom[i]; } this.length = length; this.selector = selector || ''; } //构造函数 zepto.Z = function (dom, selector) { return new z(dom, selector); } var $ = function (selector) { return zepto.init(selector); } $.fn = { css: