dom对象

原文地址 https://www.cnblogs.com/xiashengwang/p/8087181.html 1，首先需要引用下面两个文件 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 2，DataTable支持的数据类型 https://www.datatables.net/manual/data/ 2.1 数组 vardata = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ], [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] ] 2.2 对象 [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date":

前言 我们今天直接进入事件相关的学习，因为近期可能会改到里面的代码 就zepto来说，我认为最重要的就是选择器与事件相关了，随着浏览器升级，选择器简单了，而事件相关仍然是核心，今天我们就来学习学习 zepto事件处理部分篇幅不大，不到400行，前面篇幅也很小，所以真的很适合移动开发 变量定义 1 var $$ = $.zepto.qsa,2 handlers = {}, _zid = 1,3 specialEvents = {},4 hover = {5 mouseenter: 'mouseover',6 mouseleave: 'mouseout'7 } 事件部分首先定义了几个变量，$$为zepto选择器的方法，暂时不管他（据观察，好像也没有地方用到了，所以无意义） handlers为一个对象，与_zid息息相关，暂时不知道干什么的（据猜测两个应该是保存函数句柄，为removeEvent做准备） hover应该会同时触发两个事件才会触发，我们这里先不管，继续往下看 这里提供一个zid飞方法，该方法用于保证-zid的唯一性 1 function zid(element) {2 return element._zid || (element._zid = _zid++)3 } 算了，我们这里还是用一个实际点的方法跟进来吧，首先说一个关键的 $.Event(type,

前言 我们移动端基本使用zepto了，而我也从一个小白变成稍微靠谱一点的前端了，最近居然经常要改到zepto源码 但是，我对zepto不太熟悉，其实前端水准还是不够，所以便私下偷偷学习下吧，别被发现了 核心方法$() 我们使用这个方法一般有几个用途（我这里只说我自己用到过的），这里根据使用度排个序： ① 选择器/$(selector) 将返回一个包装过的dom集合对象（有很多选择器） ② html字符串/$(domStr) 仍然返回一个包装过的dom对象，他会将字符串初始化为我们的dom结构 PS：新增了一个方法可以直接赋予dom结构属性，我们这里不关注 ③ 函数/$(function(){}) 我基本没这么用过，他实在文档加载结束后执行 暂时不管这些东西吧。我们这里来一个个看看他们的实现： 1 $('div') 2 //=> all DIV elements on the page 3 $('#foo') 4 //=> element with ID "foo" 5 6 // create element: 7 $("<p>Hello</p>") 8 //=> the new P element 9 // create element with attributes:10 $("<p />",11 {12 text: "Hello",13 id: "greeting",14

什么是虚拟dom 用一个对象来描述dom结构，这个对象就是虚拟dom。 为什么要用虚拟dom 因为操作dom 需要耗费性能，dom上有上百个属性和方法。计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面可以减少dom操作、 h方法就是根据dom的类型，属性，子节点、文本。产生一个虚拟dom h.js里有createElement接受参数：type,props,...children，createElement，把key从props里取出来之后，里调用vNode(type,key,props,children),vNode返回一个对象。 render（vnode,container）方法将虚拟节点变为真实节点。看看什么类型，文本 元素 属性比对，比较老属性和新属性的差异，算出最新的，赋给dom上。 怎么比对？ 如果type、key不一样，直接replaceChild，新节点替换掉老节点。 type、key一样，都是文本类型，直接修改textContent type、key一样，都是节点类型，比对props,根据新节点的属性更新老节点的属性，对比children ,(老节点有，新节点没有-》删除老节点的innerHtml;老节点没有，新节点有-》给新节点的添加子节点；老节点有，新节点有-》updataChildren

什么是虚拟dom 用js模拟一颗dom树,放在浏览器内存中 .当你要变更时,虚拟dom 使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中 , 反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树, diff算法逐层比较,删除,添加操作 ,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for 引入key值进行区分 . 优点： 保证性能下限 ： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限； 无需手动操作 DOM ： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率； 跨平台 ： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。 缺点: 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，

Javascript 组成部分 ECMAScript + DOM + BOM 逐个释义 ECMAScript ECMA-262 定义，提供核心语言功能 语法 类型 对象 语句 关键字 保留字 操作符 DOM Document Object Model 文档对象模型 是针对 XML 但经过扩展用于 HTML 的应用程序编 程接口（API，Application Programming Interface） DOM 把整个页面映射为一个多层节点结构 BOM Browser Object Model 浏览器对象模型 如： 浏览器弹窗 XHR对象 location screen navigator cookies 移动缩放窗口 来源： https://www.cnblogs.com/pengsn/p/12617650.html

NodeList v.s. HTMLCollection 主要有两个方面不一样 1.包含节点的类型 2.使用方法 1.包含节点的类型不同(重要) (1)NodeList 一个节点的集合，既可以包含元素和其他节点(注释节点、文本节点等)。 (2)HTMLCollection 元素集合, 只有Element 2.使用方法 相同点： 1） 它们都有length属性 2） 都有元素的getter，叫做item，可以传入索引值取得元素。 3） 都是类数组 不同点： HTMLCollection还有一个nameItem()方法，可以返回集合中name属性和id属性值的元素。（部分浏览器也支持NodeList的nameItem()方法） 详细讲解 涉及获取元素的主要API DOM最初设计是为了解析XML而设计的，之后沿用到HTML上。我们可以把DOM分为两部分 core 和 html,Core 部分提供最基础的 XML 解析API说明，HTML 部分专为 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中体现的，HTMLCollection则是在html部分，不同浏览器也会实现它们的不同接口。但是现在的dom标准已经不分core和html了，反映的是浏览器的实现（）。唯一要注意的是 querySelectorAll 返回的虽然是 NodeList

DOM Core常用部分: DOM方法 创建节点:createElement(),createTextNode() 复制节点:cloneNode() 插入节点:appendChild(),insertBefore 删除节点:removeChild() 替换节点:replaceChild() 查找节点:getAttribute(),getElementById(),getElementsByTagName,hasChildNodes 设置节点属性:setAttribute() DOM属性 节点的属性:nodeName,nodeType,nodeValue 遍历节点树:childNodes,firstChild,lastChild,nextSibling,parentNode,previousSibling 下面给出这部分的简要用法,做个索引似帮助文档 1.document.createElement(“节点名”):新建一个节点 2.document.createTextNode(“文本内容”):新建一个文本节点 3.节点.cloneNode(true|false):复制该节点,参数true则连同子结点一同复制,false则不复制子结点 4.节点.appendChild(子节点):在节点下添加子结点 5.父节点.insertBefore(新节点,参照点)

JavaScript DOM 基础 DOM 即文档对象模型，是操作 HTML/XML 文档的一套方法。通过 DOM 操作节点，使页面发生改变，是动态文档技术的核心内容 DOM 的含义 DOM 即 document object model，文档对象模型 JavaScript 中有三类对象 本地对象 Native Object Object Function String Number Boolean Error EvalError SyntaxError TypeError RageError ReferenceError URIError Date RegExp 内置对象 Built-in Object Global: 一类对象的统称，是虚拟的，代表全局 任何方法和属性都在对象之下 如 isNaN()、parseInt、Number()、decodeURL() 等都是 Global 下的方法 如 Math、Infinity、NaN、undefined 等都是 Global 下的属性 本地对象、内置对象是 ECMAScript 的内部对象 宿主对象 Host Object 执行 JS 的环境提供的对象，即浏览器对象 window 对象 -> BOM，不同浏览器间没有固定规范 document 对象 -> DOM，遵从 w3c 规范 document 是 window 下的对象，即

在 jQuery 1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样： $.data(domObj,'events');//或者$('selector').data('events') jQuery 1.8.0版本开始，jQuery突然不支持这样使用了，而是改到了一个叫'_data'的函数功能上了，即，1.8.0及以后的版本你可以这么用： $._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。 /*例如可以写成*/ $._data($('#box').get(0),'events') // 这里是获取id为box的dom元素身上绑定的所有事件 $._data($('#box').get(0),'events')['click']// 这里是获取id为box的dom元素身上绑定的click事件 /*或写成*/ $._data($('#box').get(0)).events /*或还可以写成*/ $.cache[$('#box').get(0)[$.expando]].events 兼容兼容各个jQuery版本的方式，这样获取即可： var eventsData = $.data(domObj,'events') || $._data(domObj,'events');/