dom

1. 介绍 1）DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准。DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。DOM以及广义的基于树的处理具有几个优点。首先，由于树在内存中是持久的，因此可以修改它以便应用程序能对数据和结构作出更改。它还可以在任何时候在树中上下导航，而不是像SAX那样是一次性的处理。DOM使用起来也要简单得多。 2） SAX (Simple API for XML) SAX处理的优点非常类似于流媒体的优点。分析能够立即开始，而不是等待所有的数据被处理。而且，由于应用程序只是在读取数据时检查数据，因此不需要将数据存储在内存中。这对于大型文档来说是个巨大的优点。事实上，应用程序甚至不必解析整个文档；它可以在某个条件得到满足时停止解析。一般来说，SAX还比它的替代者DOM快许多。 　　选择DOM还是选择SAX？ 对于需要自己编写代码来处理XML文档的开发人员来说， 选择DOM还是SAX解析模型是一个非常重要的设计决策。 DOM采用建立树形结构的方式访问XML文档，而SAX采用的事件模型。 　　DOM解析器把XML文档转化为一个包含其内容的树

在Android平台上可以使用Simple API for XML(SAX) 、 Document Object Model(DOM)和Android附带的pull解析器解析XML文件。 下面是本例子要解析的XML文件： 文件名称：itcast.xml <?xml version="1.0" encoding="UTF-8"?> <persons> <person id="23"> <name>李明</name> <age>30</age> </person> <person id="20"> <name>李向梅</name> <age>25</age> </person> </persons> 例子定义了一个javabean用于存放上面解析出来的xml内容， 这个javabean为Person，代码： public class Person { private Integer id; private String name; private Short age; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) {

DOM 是Document Object Model( 文档对象模型 )的缩写。 DOM是把html里面的各种数据当作对象进行操作的一种思路。 比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。 节点概念 DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点 如本例 通过document.getElementById获取了id=d1的div标签对应的元素节点 然后通过attributes 获取了该节点对应的属性节点 接着通过childNodes获取了内容节点 hello HTML DOM 文档节点 [ object HTMLDocument ] 元素 [ object HTMLDivElement ] 属性节点 [ object Attr ] 内容节点 [ object Text ] < html > < body > < div id = "d1" > hello HTML DOM < / div > < / body > < script > function p ( s ) { document . write ( s ) ; document . write ( "<br>" ) ; } var div1 = document . getElementById ( "d1" )

通往全栈工程师的捷径 —— react 腾讯Bugly特约作者： 左明 首先，我们来看看 React 在世界范围的热度趋势，下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比，蓝色的是 React，红色的是房价，很明显，人类对 React 的关注程度已经远远超过了对房价的关注。 从这些数据中，大家能看出什么？ 可以很明显的看出，我在一本正经的扯淡。 从2014年到现在，React、jQuery和 Angular 的热度趋势对比，可以很明显的看到（上图），React 在全球的热度趋势增长非常快。 上图是 React 在国内的百度搜索指数，是拿 React 和 Nodejs 做了个对比，可以看出 React 的关注度也已经逼近 nodejs。 虽然在关注总量上 React 还远不及 jQuery 和 Angular 等等，但它的增长幅度超乎你想象，你知道这意味着什么吗？这意味着关注 React，你就比大多数人走在了业界的前沿！ 那么React到底是什么鬼？ 引用官网的简介，”一个用来构建用户界面的javascript库”。 React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用

首先，我们来看看 React 在世界范围的热度趋势，下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比，蓝色的是 React，红色的是房价，很明显，人类对 React 的关注程度已经远远超过了对房价的关注。 从这些数据中，大家能看出什么？ 可以很明显的看出，我在一本正经的扯淡。 从2014年到现在，React、jQuery 和 Angular 的热度趋势对比，可以很明显的看到（上图），React 在全球的热度趋势增长非常快。 上图是 React 在国内的百度搜索指数，是拿 React 和 Nodejs 做了个对比，可以看出 React 的关注度也已经逼近 nodejs。 虽然在关注总量上 React 还远不及 jQuery 和 Angular 等等，但它的增长幅度超乎你想象，你知道这意味着什么吗？这意味着关注 React，你就比大多数人走在了业界的前沿！ 那么 React 到底是什么鬼？ 引用官网的简介，”一个用来构建用户界面的 javascript 库”。 React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 由于 React 的设计思想极其独特，属于革命性创新

Virtual DOM 毫无疑问是 React 的精髓。 可能很多人包括我看完官方文档之后对Virtual DOM的理解就是： 它通过JS对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。 这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。 如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义：抽象。 Virtual DOM 最大的意义绝不是提升性能，而是他对DOM进行了一层抽象。当我们在浏览器中使用 React的时候，感觉不是特别明显，毕竟我们写的DOM标签跟原生的没什么区别，并且最终都被渲染成了DOM。 但是react native 的推出已经完全说明了 Virtual DOM 的颠覆性意义：它抽象了DOM的具体实现。 在浏览器中，Virtual DOM最终编译成了DOM，但是在 iOS中，Virtual DOM却完全可以编译成 oc 中的组件，甚至在安卓、windows、mac osx 中都完全可以编译成对应的UI组件。 在没有Virtual DOM之前，我们的代码中JS逻辑和UI是完全耦合的，不具有任何可移植性。 使用了Virtual DOM之后我们的代码编程这样了： 注意上图分为三个部分： 1，其中蓝色部分是JS业务逻辑，完全可以借助Node移植到任意平台上。 2，其中红色部分是 Virtual DOM

1. 操作属性 1.1 HTML 属性与 DOM 属性的对应 <div> <label for="username">User Name: </label> <input type="input" name="username" id="username" class="text" value=""> </div> var input = document.getElementsByTagName('input')[0]; console.log(input.id); // 'username' console.log(input.type); // 'text' console.log(input.className); // 'text' console.log(document.getElementsByTagName('label')[0].htmlFor); // 'username' 1.2 属性操作方式 1.2.1 Property Accessor // 读取属性 input.className; // 'text' input[id]; // 'username' // 写入属性（可增加新的属性或改写已有属性）。 input.value = 'newValue'; input[id] = 'newId'; 1.2.2 getAttribute /

前言 最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。 欢迎批评指出错误的地方。 Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; })其中return返回的对象包含很多参数，下面一一说明 你知道用AngularJs怎么定义指令吗？0 1.restrict （字符串）可选参数，指明指令在DOM里面以什么形式被声明； 取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A； E(元素)：<directiveName></directiveName> A(属性)：<div directiveName='expression'></div> C(类)： <div class='directiveName'></div> M(注释)：<--directive:directiveName expression--> 你知道用AngularJs怎么定义指令吗？1 例如restrict：‘EA’ 则表示指令在DOM里面可用元素形式和属性形式被声明； 一般来说，当你创建一个有自己模板的组件的时候，需要使用元素名，如果仅仅是为为已有元素添加功能的话，就使用属性名

1、blur、focus、load和unload不能像其它事件一样冒泡。事 实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。 2、 div等DOM 加上tabindex属性,可以触发blur事件。但仍然不冒泡。 想想挺在理的，但jQuery的on方法该怎么用呀？ ***************************************************2017年6月增加 今天偶尔看到以前的文章，其实这个问题已经解决了。 用jquery的话，用focusin ,focusout事件来代替blur,focus事件。 focusin ,focusout事件是会冒泡的。但是浏览器不支持它冒泡，jquery怎么就能这么大本事监测到呢？这具体原理可以看 《 JavaScript忍者秘籍》，我印象这本书的倒数第二章吧，书没在手边，没法查！ 来源： oschina 链接： https://my.oschina.net/u/1540190/blog/542455

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，以滴滴为例，可以是这样竖向滚动的列表，如图所示： 也可以是横向滚动的导航栏，如图所示： 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理 不少同学可能用过 better-scroll，我收到反馈最多的问题是： 我的 better-scroll 初始化了， 但是没法滚动。 不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构： <div class=