其实，很多年前就可以用纯JavaScript替代jQuery了。因为，随着所有浏览器的不断升级，原生javascript已基本支持jQuery的所有简便功能。

    也许以后的代码中，会有类似jQ()函数的_qs("#existedDiv")函数来代替document.querySelector("#existedDiv");
    会有类似jQ()函数的_qsAll("div")函数来代替document.querySelectorAll("div");

    在这里总结的是现代Javascript操作DOM的过程。

    DOM的Js操作主要集中在以下几个DOM的属性和方法中：

    1、获取页面上的单DOM节点，.getElementById()或.querySelector()：
    var existedDiv=document.getElementById("existedDiv");
    或
    var existedDiv=document.querySelector("#existedDiv");

    2、获取页面上的所有同一类型的DOM节点，.querySelectorAll()：
    var existedDiv=document.querySelectorAll("div")[0];
    
    3、克隆DOM节点，.cloneNode()：
    var newDiv=existedDiv.cloneNode();
    newDiv.id="";
    
    4、在指定DOM元素内添加新的DOM节点，.appendChild()：
    document.getElementById("targetDomNode").appendChild(newDiv);

    5、在元素后同级尾部添加新的DOM节点，.parent.appendChild()：
    existedDiv.parentNode.appendChild(newDiv);
    
    
    6、在父节内指定插入点，(父节点).insertBefore()：
    var newLi = document.createElement( "li" );
    var existedNode= document.querySelector("#existedNode");
    existedNode.insertBefore(newLi,existedNode.children[0]);

    7、调出子节点的方法有两种：childNodes()和children()。childNodes()与children()的区别在于：
    childNodes()包括文本节点和注释节，会把一个div之前之后的空格和\n分别作为一个text节点；
    而，children()只返回元素节点。

    8、输出所有父节点中的DIV的方法为：
    operationBtn.onclick=function(e){
        var element = this;
        var i=0;
        while(element&&element.tagName){
            if(element.tagName.toUpperCase()=='DIV'){
                console.log(i,element);
                i++;
            }
            element=element.parentNode;
        }
    }

    ————www.v-signon.com学习者共勉