记得那会刚学JavaScript的时候，注册事件都喜欢用最原始的方式（以下说的IE，都为早版本的IE，比如6,7,8）

<input type="button" id="btn" value="点我" />

var btn=document.getElementById("btn");
btn.onclick=function(){
    alert("点击了btn");
}

这样的确是没有问题，所有浏览器都支持。但是，有一点不好的是，多人开发的时候，别人也可能这样给btn注册了一个click事件，然后我在这样注册一个click事件，别人注册的事件就被我的给覆盖了。看人家jQuery，不论注册多少个事件，都会执行。那他是怎么实现的呢

今天无意翻出上学时候做的一些C语言的demo，其中有一个是要按要求输出一个矩阵。C语言很久不碰了，环境都跑不起来了，我就画个图，演示一下矩阵的样子，如下图

嗯。就是这个样子，相信大家一下就看出规律了。记得以前用C语言输出的时候，是一行一行输出的，没法按照这个规律走向依次输出，因为我的输出窗口是DOS控制台，一旦换行，就不能返回上一行了。既然现在都做Web了，没有这么多限制了，那就当为了弥补当年的遗憾，再做一个按规律走向输出的

这几个筛选器都是找直系祖先元素的，但具体用法不同
.parent(expr) - 只把父级和expr表达式匹配，匹配成功就返回父级。匹配失败，返回空数组
.parents(expr) - 加了s，就成了匹配祖先了，从父级开始查找，只要是和expr表达式匹配的直系祖先元素都返回。没匹配成，返回空数组
.closest(expr) - 这个是查最近的匹配元素（从自己开始查找），匹配成功，立即返回。匹配失败，返回空数组
.parentsUntil(expr) - 这个是从父级开始查找，到expr停止。返回父级（包括）到expr（不包括）之间的直系祖先元素。如果expr没有匹配到元素，会返回父级（包括）到html（包括）之间的所有直系祖先元素

学过CSS的朋友都知道，当一个节点使用绝对定位后，那么他的定位参考系就是离他最近的且使用了绝对或相对定位的直系祖先节点。当没有这样的节点的时候，那么定位参考系为BODY节点。

这句话好像比较绕口，那就举个例子。比如A节点使用绝对定位，left:50px;top:40px;如果他的直系祖先节点中有使用了相对或绝对定位的节点P。那么，此时A节点的位置是相对P左上顶点向右偏移50px，向下偏移40px。如果没有这样的节点，那么A的位置就是相对BODY节点进行定位。
这里的offsetParent就类似这样的效果，这个属性会返回离调用对象最近的进行过CSS定位的直系祖先节点。如果没有这样的节点，会返回BODY节点。

在了解这个对象之前，在向DOM追加多个节点时，我都会先创建一个空标签，然后把节点追加到一个空标签里，最后在把这个标签追加到DOM里。这样虽然避免了循环追加，多次渲染这样不友好的操作，但是这样却破坏了原有的文档结构。每次看到那个没用的空标签，都总觉得心里很不舒服，纠结着。

直到有一天看到《JavaScript高级编程》上说到有一种节点，将其插入文档树时，插入的不是其自身，而是它的所有子孙节点。这个神奇的节点就DocumentFragment，翻译过来应该叫文档片段。这样一来，困扰我已久的问题，终于迎刃而解了。想想兴奋之余，上手试一试先。