dom

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。 1、jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。 Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。 2、Dom Load 用原生的js的时候我们通常用onload时间来做一些事情，比如： window.onload=function(){ //do something } //或者经常用到的图片，假设这个 document.getElementByIdx_x("imgID").onload=function(){ //do something } 这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。 那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。 3.用个最常用的例子说明Dom Ready和Dom Load两者的区别 Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； Dom

1、jq ready()的方法就是Dom Ready 他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。 一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。 那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。 2、Dom Load 用原生的js的时候我们通常用onload时间来做一些事情，比如： window.onload=function(){ //do something } //或者经常用到的图片，假设这个 document.getElementByIdx_x("imgID").onload=function(){ //do something } 这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。 那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。 3.用个最常用的例子说明Dom Ready和Dom Load两者的区别 Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； Dom

这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。 一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。 那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。 2、Dom Load 用原生的js的时候我们通常用onload时间来做一些事情，比如： window.onload=function(){ //do something } //或者经常用到的图片，假设这个 document.getElementByIdx_x("imgID").onload=function(){ //do something } 这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。 那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。 3.用个最常用的例子说明Dom Ready和Dom Load两者的区别 Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； Dom

指令<AngularJs> 对于指令。能够把它简单的理解成在特定DOM元素上执行的函数，指令能够扩展这个元素的功能。 首先来看个完整的參数演示样例再来具体的介绍各个參数的作用及使用方法： angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // 返回一个对象或连接函数

一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。 首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些不好的实践以及一些优化方案。 浏览器是如何呈现一张页面的 一个浏览器有许多模块，其中负责呈现页面的是渲染引擎模块，比较熟悉的有WebKit和Gecko等，这里也只会涉及这个模块的内容。 先用文字大致阐述下这个过程： 解析HTML，并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息，比如box的位置与尺寸 根据Render tree并利用浏览器的UI层进行绘制 其中DOM tree和Render tree上的节点并非一一对应，比如一个display:none的节点就在会存在与DOM tree上，而不会出现在Render tree上，因为这个节点不需要被绘制。 上图是Webkit的基本流程，在术语上和Gecko可能会有不同，这里贴上Gecko的流程图，不过文章下面的内容都会统一使用Webkit的术语。

前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作, 无论增删改查在前端页面操作这一范围内都是比较消耗性能的. 如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素. 操作DOM 这里我希望介绍的相对系统一点,而不是东一句西一句,所以把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读.这里就总结出最基本最常用的DOM操作. Javascript: jQuery: 上面的思维导图分别是javascript和jQuery下操作DOM的一些常用Function,并不完全我仅仅列出相对常用的.这里我比较推荐的是jQuery的操作方式,更加便捷的同时在性能上也相对有所保障. 性能影响 DOM操作会导致最重要的,也是我们最需要的问题就是导致用户阻塞的重构(reflow)和重绘(repaint).比较通俗的一句话就是你在页面上的任何操作都是有代价的,有些大有些小,如果我们的操作比较频繁或者波及范围较大,那么就要讲究方式和技巧.reflow和repaint就是我们在改变页面或者说操作DOM时,会带来的两种后果. reflow意味着结构的改变,比如一堆元素堆叠,改变其中一个的宽高,那么相应的所有元素的位置都要改变

很多人都知道：因为操作DOM代价大、耗性能，所以要尽量减少DOM操作，但是，为什么代价大？耗性能呢？目前的硬件水平比当年高出好几倍了还需要这么做吗？ 下面，就我看过的资料整理如下： 一、DOM其实就是一个javascript对象，每个DOM节点就是这个对象里面的属性。所以，操作DOM其实就是修改js对象的属性值（就好比：js.a = "b"），这个js对象改变后，会触发一些浏览器的行为，这个行为（比如layout和paint）就是代价大、耗性能的罪魁祸首了。 首先，从浏览器层面入手，有渲染引擎和js引擎（具体请看 各浏览器内核汇总 ）。 渲染引擎工作： 解析HTML代码，生产DOM tree 解析CSS样式，结合DOM tree生产Render tree（display: none;的结点不会存在Render tree上，最后不会被paint） 计算Render tree各个节点的布局信息，比如box的位置、尺寸、颜色、外形等 根据计算后的布局信息，调用浏览器的UI引擎进行渲染。 上图为Gecko内核（Opera浏览器12.17以前的版本）的渲染流程 上图为Webkit内核（Chrome 28以前版本和Safari）的渲染流程 layout（布局）和paint（绘制）是代价最大的，layout就是布局变动造成重新计算（耗CPU，有时也很耗内存）

DOM方法 创建节点 createElement：创建元素节点 createTextNode：创建文本节点 复制节点 cloneNode 插入节点 appendChild：给元素节点追加一个子节点 insertBefore：把一个给定节点插入到一个给定元素节点的前面 删除节点 removeChild：从一个给定元素里删除一个子节点 替换节点 replaceChild：把一个给定父元素里的一个子节点，替换为另一个节点 设置属性节点 setAttribute：为给定元素节点添加一个新的属性值或是改变它的现有属性值 查找节点 getAttribute：返回一个给定元素节点的一个给定属性的值 getElementById：寻找一个有着给定id属性值的元素 getElementsByTagName：寻找有着给定标签名的所有元素 hasChildNodes：用来检查一个给定元素是否有子节点 DOM属性 节点的属性 nodeName：返回一个字符串，其内容是给定节点的名字，只读 nodeType：返回一个整数，代表给定节点的类型，一共有12种，1：元素节点，3：文本节点 nodeValue：返回给定节点的当前值 遍历节点树 childNodes：返回一个数组，这个数组由给定元素节点的子节点构成 firstChild：返回一个给定元素节点的第一个子节点 lastChild

一：注册事件（绑定事件） 注册事件有两种方式： a.传统方式 b.方法监听注册方式 二：优缺点 a.传统注册： 利用on开头的事件 eg: onclick,onmouseove… <button onclick="alert('hi~')" ></button> btn.onclick = function() {} 特点：注册事件的 唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 b.方法监听注册： w3c 标准 推荐方式 addEventListener() 是一个方法 IE9之前的IE不支持此方法，可使用attachEvent()代替 特点：同一个元素同一个事件 可注册多个事件（监听器） 按注册顺序依次执行 三：addEventListener()监听方式 （具有兼容性问题，IE9以上支持） 1.eventTarget.addEventListener(type, listener[, useCapture]) 2.此方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数 type: 事件类型 字符串 ，如 click，mousedown（这里 不需要带on ） listener：事件处理函数，事件发生时，会调用该监听函数 < ! DOCTYPE html > < html