专题：DOM -- IT技术博客大学习 -- 共学习共进步！

DOM中Property与Attribute的区别

property和attribute的汉语翻译几乎相同，都有“属性”的意义（这里姑且称attribute为“特性”，以方便区分），而他们的取值也经常相同，但有时又会踩坑，发现二者会不相等，不同步。

jQuery对象和DOM对象小结

在使用jQuery的时候经常会将jQuery对象和DOM对象弄混，在搞不清楚关系的时候，经常会将两者的方法混用、乱用。

用 Virtual DOM 加速开发

简聊(by Teambition)产品前端中使用了 React，最初开发时使用的 Backbone 搭配 doT.js 模版渲染界面，实践下来效果提升了很多。我们希望能吸引更多同学能够运用 Virtual DOM 改进前端开发，所以这篇文章会主要介绍 React 当中 Virtual DOM 相关的知识。

React入门：关于虚拟DOM（Virtual DOM）

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。 React 主要的目标是提供一套不同的, 高效的方案来更新 DOM.不是通过直接把 DOM 变成可变的数据, 而是通过构建 “Virtual DOM”, 虚拟的 DOM, 随后 React 处理真实的 DOM 上的更新来进行模拟相应的更新。

[译文]使用 Mojo::DOM 来解析和处理 HTML

每个人都会用到的就是解析 HTML, 很多人都是使用正则来进行解析. 当然我们是可以使用正则, 但是相比起我最喜欢的方案使用 Mojo::DOM 这个模块所提供的 CSS3 的选择器可以直接进行 DOM 元素的操作来讲, 这个方案有意思多了.

仅100行的JavaScript DOM操作类库

如果你构建过Web引用程序，你可能处理过很多DOM操作。访问和操作DOM元素几乎是每一个Web应用程序的通用需求。我们我们经常从不同的控件收集信息，我们需要设置value值，修改div或span标签的内容。当然有许多库能帮助处理这些行为，其中最流行的当属jQuery，已经成为事实上的标准。有事你并不需要jQuery提供每一样东西，所以在这篇文章中，我们将看看如何创建自己的类库来操作DOM元素。

javascript DOM操作中的insertAdjacentHTML方法

insertAdjacentHTML和 insertAdjacentText这两个方法很灵活，可以在指定的地方插入html内容和文本内容，在大部分情况下比element.innerHTML的性能更好，比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现不好。

DOM元素上jQuery事件几点学习

闲着无聊看了jQuery event部分的代码，发现一个小惊喜，嘿嘿，可能我奥特曼了。以下一jQuery 1.4.4版本说事，更高级版本稍有不同，但是关系不大。 jQuery 在元素上绑定事件的时候，会在该元素上添加一个自定义属性“evens”，这个属性包含了通过jQuery绑定事件的事件集合。

javascript获取隐藏dom的宽高

一个隐藏的DOM是获取不到宽高的，如果想要获取，采用下面的方法：首先clone一个DOM，设置position:absolute，然后设置top为一个比较大的负值，然后使其显示出来，最后获取到了DOM的宽高后，将其remove。

页面DOM加载顺序和用户视觉浏览顺序的一致性

tabindex属性有两个功能：其一是使元素可获取焦点，另一个是为元素分配在焦点序列中的位置。tabindex等于0可使元素聚焦，但是是以源元素的顺序添加到焦点序列中的。焦点的顺序依照tabindex正值的顺序。设置tabindex值导致元素的顺序与元素在DOM对象模型（DOM）中的顺序不一致，这意味着该顺序对辅助技术用户来说是不正确的，这一点繁体字网就比较注重。这主要是因为tabindex属性是在HTML或XHTML中定义的，而不是CSS指定。这可能会在未来的规范中改变，它也可能与视觉呈现顺序不一致。

对大量子节点DOM操作的最佳实践方式

有时要处理一个DOM节点下面的大量子节点，比如对一个ul一次性插入几百个li，或者清空一个ul下面的所有li，或者是替换掉ul下面的所有内容。本文记录一下最佳的实践方式。

DOM Storage全解析

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更...

DOM操作琐碎知识点

1. parentWindow 与 defaultView parentWinow是IE下document的特有属性，表示的是document所在的window对象 defaultView DOM Level2中引入的属性，document.defaultView指向默认的AbstractView。 2. 各种坐标以及维度属性元素可见区域宽/高(不包括border)： clientWidth/clientHeight 元素可见区域宽/高(包括border)： offsetWidth/offsetHeight 元素整体宽/高(包括因滚动而隐藏的部分)： scrollWidth...

JS操作iframe里的dom

看到断桥残雪对我上一篇日志的回复我也学习了一下JS操作iframe里的dom；主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作》和支付宝UED的《用JS访问操作iframe里的dom》，非常不错的两篇文章。一、父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox...

不要纠结于实现的圈套中

有的时候，过于钻牛角尖并不是什么好事，只会把自己越套越牢。换个思路，其实方法很简单。近来忙着改一些东西，需求来的时候真是锐不可挡。被越来越多的任务压的喘不过气来。今天在写一个适应于所有游戏充值页面的js，希望大多数页面可以共用一套js，方便维护。在这个过程中，遇到了如下问题：

PHP Simple HTML DOM Parser 是一个不错的html/xml分析类

用php解析html/xml文件，PHP内置了几个类，但是要不就是目前处理能力过于简单，用户编码太多，要不就是对文档的要求很严格。刚好今天要用php抓取大量网页的特定内容，在sf.net 上找到了这个类。单个文件，目前36k。官方给出的特性和要求是：相当简单的方式操作HTML 要求PHP 5 以上支持无效的HTML 类似jQuery的选择器来查找元素单行代码就可以从HTML页面抓取内容。支持无效的HTML很重要，网络上能严格通过w3c验证的网站太少...

phpQuery:像jQuery一样处理DOM

phpQuery是一个服务器端jQuery开源项目。它可以让PHP开发人员采用与jQuery相同的语法来处理网页元素。也就是说可以使用php操作HTML或者XML文档，遍历文档的节点，很轻松的取出，填充节点内容。或者简单来说，除了js的事件响应部分，其余的几乎都可以用php来实现。php对数据处理的能力显然要比JS强大很多，对不熟悉JS的同学来说，phpQuery是个非常强大的帮手。其实phpQuery也可以取代一部分Smarty的功能。同时，前面也介绍了使用...

获取Dom元素的X/Y坐标

现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下――注册鼠标移动事件――捕获鼠标正键抬起――注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直...