DOM库

获取页面中元素的方法

document.getElementById('xxx');
context.getElementsByName('xxx');
context.getElementsByClassName('XXX');不兼容IE6-8,没有这个方法
document.getElementsByName('XXX');//在IE中只对表单元素的name起作用
document.body;//获取整个body
document.documentElement;//获取整个HTML
context.querySelector('xxx');//不兼容IE6-8 获取到的集合不存在DOM映射，因为获取到的nodeList是静态的
context.querySelectorAll('xxx');//不兼容IE6-8

兼容IE6-8的getElementsByClassName方法

function getElementsByClassName(className,content){
    content = content || document;
    if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        var ary = [];
        //正则/(^ +| +$)/去除开头和结尾的空格
        ary = className.replace(/(^ +| +$)/g,"").split(/ +/g);
        //获取指定上下文中的所有标签
        var nodeList = content.getElementsByTagName("*");
        var list = [];
        for(var i=0,len=nodeList.length;i<len;i++){
            var flag = true;
            for(var j=0;j<ary.length;j++){
                if(!hasClass(nodeList[i],ary[j])){
                    flag = false;
                    continue;
                }
            }
            if(flag){
                list.push(nodeList[i]);
            }
        }
        return list;
    }else{
        list = content.getElementsByClassName(className);
        return Array.prototype.slice.call(list);
    }
}

描述节点和节点之间关系的属性

• 节点包含

元素节点(1)属性节点(2)文本节点(3)注释节点(8)文档节点document(9)

在标准浏览器中会把换行和空格当作文本节点处理

• 所有带'Element'的属性在IE-6-8下都是不兼容的
• 常用的元素节点

curEle.childNodes;//获取curEle的全部子节点（包含元素节点）
curEle.children;//获取curEle的全部元素子节点，在IE6-8下获取的结果和标准浏览器获取结果不一致
curEle.parentNode;
curEle.previousSibling;
curEle.previousElementSibling;
curEle.nextSibling;
curEle.nextElementSibling;
curEle.lastChild;
curEle.lastElementChild;
curEle.firstChild;
curEle.firstElementChild;

 

将nodListe这种类数组转为数组的封装方法

function listToArray(likeAry) {
    var ary = [];
    if(/MSIE (6|7|8)/i.test(navigator.userAgent)){
        for(var i=0,len=likeAry.length;i<len;i++){
            ary[ary.length] = likeAry[i];
        }
    }else{
        ary = Array.prototype.slice.call(likeAry)
    }
}

 

/*
本方法获取某元素的所有元素子节点
children在IE6-8下不兼容，解决办法：在IE6-8下获取所有节点，然后筛选出元素子节点
如果不传tagName,则获取所有子元素节点，如果传则获取tagName元素子节点*/
function children(curEle,tagName) {
    var ary = [];
    if(/MSIE (6|7|8)/i.test(navigator.userAgent)){
        var nodeList = curEle.childNodes;
        for(var i=0,len=nodeList.length;i<len;i++){
            var curNode = nodeList[i];
            if(curNode.nodeType === 1){
                ary.push(curNode);
            }
        }
    }else{
        ary = Array.prototype.slice.call(curEle.children);
    }
    if(typeof tagName === 'string'){
        for(var j=0;j<ary.length;j++){
            var cur = ary[j];
            if(cur.nodeName.toUpperCase() !== tagName.toUpperCase()){
                ary.splice(j,1);
                j--;
            }
        }
    }
    return ary;
}

获取上一个 哥哥元素节点，原生方法curEle.previousElementSibing方法不兼容IE6-8

/*
 * 解决思路：获取上一个哥哥节点，如果是元素节点则返回，如果不是则接着向上找*/
function prev(curEle){
    if(/MEIE (6|7|8)/i.test(navigator.userAgent)){
        var pre = curEle.previousSibling;
        while(pre && pre.nodeType !== 1){
            pre = pre.previousElementSibling;
        }
        return pre;
    }else{
        return curEle.previousElementSibling;
    }
}

获取下一个弟弟元素节点，原生方法curEle.nextElementSibling方法不兼容IE6-8

/*
获取元素的下一个弟弟元素节点
原方法不兼容IE6-8
解决办法：获取下一个弟弟节点，如果是元素节点，则return，否则继续查找
 */
function next(curEle) {
    if(/MSIE (6|7|8)/i.test(navigator.userAgent)){
        var next = curEle.nextSibling;
        while (next && next.nodeType !== 1){
            next = next.nextSibling;
        }
        return next;
    }else{
        return curEle.nextElementSibling;
    }
}

获取元素的全部哥哥元素节点

/*
获取元素的所有哥哥元素节点
原DOM库中没有，自己写一个方法
解决办法：一直往前找哥哥节点，如果是元素节点则放入数组，知道找到所有的哥哥节点
 */
function prevAll(curEle) {
    var pre = curEle.previousSibling;
    var ary = [];
    while (pre){
        if(pre.nodeType === 1){
            ary.unshift(pre);
        }
        pre = pre.previousSibling;
    }
    return ary;
}

获取所有的弟弟元素节点

/*
获取元素的所有弟弟元素节点
原DOM库中没有，自己写一个方法
解决办法：一直往后找弟弟节点，如果是元素节点则放入数组，知道找到所有的弟弟节点
 */
function nextAll(curEle) {
    var next = curEle.nextSibling;
    var ary = [];
    while (next){
        if(next.nodeType === 1){
            ary.unshift(next);
        }
        next = next.nextSibling;
    }
    return ary;
}

获取相邻的元素节点

/*
获取上一个哥哥元素节点+获取下一个弟弟元素节点
 */
function sibling(curEle) {
    var ary = []
        prev = prev(curEle),
        next = next(curEle);
    prev ? ary.push(prev):null;
    next ? ary.push(next):null;
    return ary;
}

获取所有的兄弟元素节点

/*
所有的哥哥元素节点+所有的弟弟元素节点    
 */
function siblings(curEle) {
    return prevAll(curEle).concat(nextAll(curEle));
}

获取元素的索引

/*
有几个哥哥元素节点索引就是几
 */
function index(curEle) {
    return prevAll(curEle).length;
}

获取第一个元素子节点

/*
获取第一个元素子节点
解决办法：获取所有元素子节点中的第一个元素子节点
 */
function firstChild(curEle) {
    var childList = children(curEle);
    return childList.length >0 ? childList[0] :null;
}

获取最后一个元素子节点

/*
获取最后一个元素子节点
解决办法：获取所有元素子节点中的最后一个元素子节点
 */
function lastChild(curEle) {
    var childList = children(curEle);
    return childList.length >0 ? childList[childList.length-1] :null;
}

DOM的增删改

curEle.createElement(node);
curEle.createDocumentFragment();
curEle.appendChild();
curEle.insertBefore();
curEle.cloneNode(true/false);
curEle.replaceChild();
curEle.getAttribute();
curEle.setAttribute();
curEle.removeAttribute();

向指定容器的开头追加元素

/*
实现：向指定容器的开头追加元素
解决方法：找到容器的第一个子元素节点，并追加元素到第一个子元素节点之前
如果一个元素子节点都没有，放在容器末尾即可
 */
function preAppend(curEle,newEle) {
    var first = firstChild(curEle);
    console.log(first);
    if(first){
        curEle.insertBefore(newEle,first);
        return;
    }
    curEle.appendChild(newEle);
}

把新元素追加到指定元素的后面

/*
实现：把新元素追加到指定元素的后面
方法：找到指定元素的下一个弟弟元素节点，如果存在，则将新元素追加到弟弟元素节点的前面
如果不存在弟弟元素节点，则将新元素追加到指定元素的后面
 */
function insertAfter(newEle,oldEle) {
    var nex = next(oldEle);
    if(nex){
        oldEle.parentNode.insertBefore(newEle,nex);
        return;
    }
    oldEle.parentNode.appendChild(newEle);
}

处理容器的类

以下三个方法都没有，是我们自己封装的方法

curEle.hasClass;

curEle.addClass;

curEle,removeClass;

判断curEle的class类是否包含某个类名

/*
判断curEle的类是否包含className
 */
function hasClass(curEle,className) {
    //正则：开头可以没有空格或多个空格，结尾可以没有或者有多个空格，中间是className
    var reg = new RegExp("(^| +)"+className+"( +|$)");
    return reg.test(curEle.className);
}

给curEle增加某个类

/*
实现：给curEle如果类中没有className则添加，如果有则不添加
 */
function addClass(curEle,className) {
    var ary = [];
    ary = className.split(/ +/g);
    for(var i=0,len=ary.length;i<len;i++){
        if(!hasClass(curEle,ary[i])){
            curEle.className += ' '+ary[i];
        }
    }
}

删除curEle中的某个类

function removeClass(curEle,className) {
    var ary = [];
    ary = className.split(/ +/g);
    for(var i=0,len=ary.length;i<len;i++){
        if(hasClass(curEle,ary[i])){
            var reg = new RegExp("(^| +)"+ary[i]+"( +|$)","g");
            curEle.className = curEle.className.replace(reg," ");
        }
    }
}

DOM盒子模型

以前的文章有总结过