这几个筛选器都是找直系祖先元素的，但具体用法不同
.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，翻译过来应该叫文档片段。这样一来，困扰我已久的问题，终于迎刃而解了。想想兴奋之余，上手试一试先。