DOM操作相关文章(持续更新中)

querySelector：选择相应的元素标签具有和jquery类似的写法
用法：

document.querySelector("div.test>p:first-child");
document.querySelector("#test");

（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）
querySelectorAll：选择相应的元素标签具有和jquery类似的写法，支持选择器的
用法：

document.querySelectorAll("div.test>p:first-child")[0];
document.querySelectorAll("#test")[0];

（返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）
总结：他们接收的参数和 CSS 选择器完全一致；querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。
这是原生方法，比起jquery速度快，缺点是IE6、7不支持。
推荐文章:http://www.nowamagic.net/librarys/veda/detail/388

DocumentFragment：更快捷的操作DOM的途径http://www.webhek.com/javascript-documentfragment/
http://www.cnblogs.com/blueSkys/p/3685740.html
代码：

<ul id="list"></ul>
<script>
    var frag=document.createDocumentFragment();
    for(var x=0;x<10;x++){
        var li=document.createElement("li");
        li.innerHTML="List item"+x;
        frag.appendChild(li);
    }
    var list=document.getElementById("list");
    list.appendChild(frag);
</script>

持续更新中.....