Javascript以內置的DOM操做屬性和方法

DOM： Document Object Model；

獲取頁面中元素的方法：

document.getElementById();

context.getElementsByTagName(TAGNAME) ->把指定容器內的全部的子子孫孫輩分的全部標籤名爲TAGNAME的都獲取了

context.getElementsByClassName(ClassName) -> 在IE6~8不兼容

document.getElementsByName() ->此方法在IE6~8只對表單元素起做用

document.body

document.documentElement

contect.querySelector/context.querySelectorAll  在IE6~8不兼容，經過此方法獲取的節點集合不存在DOM映射

描述節點和節點之間關係的屬性(在標準的瀏覽器中會把空格和換行都當作文本節點處理)

childNodes  獲取全部子節點 

children  -> 在IE6~8下獲取的結果和在標準瀏覽器下獲取的結果是不同的

parentNode

previousSibling/previousElementSibling  //獲取上一個兄弟元素  可是後面的在IE6~8下是不兼容的

nextSibling/nextElementSibling

lastChild/lastElementChild

firstChild/firstElementChild

 

動態操做DOM的方法：增刪改

createElement

document.createDocumentFragment()

appendChild

insertBefore

cloneNode(true/false)

replaceChild

removeChild

get/set/removeAttribute

//結下來寫的全部的方法在jquery中的做用和方法名是同樣的

//->function children ->獲取某一個容器中全部的子節點(還能夠篩選出指定標籤名)

//-> function getElementClass -> 經過元素的樣式類名獲取一組元素，兼容全部瀏覽器(jq中沒有這個方法名，可是jq的一部分選擇器也是基於這個方法的原理來實現的)

//獲取上一個哥哥元素節點(prev)，獲取下一個弟弟元素節點(next)，獲取全部的兄弟元素節點(prevAll/nextAll)，獲取相鄰的兩個元素節點(sibling)，獲取全部的兄弟元素節點(siblings)，獲取第一個元素子節點(firstChild)，獲取最後一個元素子節點(lastChild)，index獲取當前元素的索引，prepend和appendChild增長到某一個容器的開頭，insertAfter和insertBefore 對應，增長到某一個元素的後面

addClass增長class類名，removeClass刪除class類名，hasClass判斷是否存在樣式類名

//jquery：css方法包括下面三個方法

getClass獲取Class類名，setClass設置Class類名，setGroupCss批量設置Class類名

childern方法：獲取curEle下全部元素的子節點，兼容全部的瀏覽器，若是傳遞了tagName，能夠在獲取的集合中進行二次篩選，把指定的標籤名獲取出來

//首先獲取全部的子節點(childNodes),在全部的子節點中把元素幾點都篩選出來(nodeType === 1)
//若是多傳遞一個標籤名的話,咱們還要把獲取的子元素集合中把對應的標籤名進行二次篩選
function childern(curEle, tagName) {
    var nodeList = curEle.childNodes;
    var ary = [];
    //IE5~8不能使用childern屬性,咱們本身寫代碼程度
    if (/MSIE (6|7|8)/i.test(navigator.userAgent)) {
        for (var i = 0, len = nodeList.length; i < len; i++) {
            if (nodeList[i].nodeType === 1) {
                ary[ary.length] = nodeList[i]
            }
        }
    } else {
        //標準瀏覽器中,咱們直接使用childern,可是這樣獲取的是元素集合(類數組),
            爲了和IE6~8下保持一致,咱們借用數組原型上的slice,把類數組轉換成數組
        ary = Array.prototype.slice.call(curEle.childern)
    }
    //進行二次篩選
    if (typeof tagName === 'string') {
        for (var k = 0; k < ary.length; k++) {
            var curEleNode = ary[k];
            if (curEleNode.nodeName.toLocaleLowerCase() 
                !== tagName.toLocaleLowerCase()) {
                //說明不是想要的元素標籤
                ary.splice(k, 1);
                k--;
            }
        }
    }

    return ary;
}

prev:獲取上一個哥哥元素節點

function prev(curEle) {
    if (/MSIE (6|7|8)/i.test(navigator.userAgent)){
        return curEle.previousElementSibling;
    }else {
        //不兼容IE瀏覽器,判斷上一個哥哥節點是不是元素節點,若是不是,基於當前繼續找上面的
            哥哥的節點...一直找到爲止,若是沒有哥哥元素節點,返回null
        var pre = curEle.previousSibling;
        while (pre && pre.nodeType !== 1){
            pre = pre.previousSibling;
        }
        return pre;
    }
}

next:獲取下一個弟弟元素節點

function next(curEle) {
    if (/MSIE (6|7|8)/i.test(navigator.userAgent)){
        return curEle.nextElementSibling;
    }else {
        var nex = curEle.nextSibling;
        while (nex && nex.nodeType !== 1){
            nex = nex.nextSibling;
        }
        return nex;
    }
}

prevAll:獲取全部的哥哥的元素節點

function prevAll(curEle) {
    var ary = [];
    var pre = prev(curEle);
    while (pre){
        ary.unshift(pre);
        pre = prev(pre)
    }
    return ary;
}

nextAll:獲取全部的弟弟元素節點

function nextAll(curEle) {
    var ary = [];
    var nex = next(curEle);
    while (nex){
        ary.push(nex);
        nex = next(nex)
    }
    return ary;
}

sibling：獲取相鄰的兩個元素

function sibling(curEle) {
    var pre = prev(curEle);
    var nex = next(curEle);
    var ary = [];
    pre?ary.push(pre):null;
    nex?ary.push(nex):null;
    return ary;
}

siblings：獲取全部的兄弟元素

function siblings(curEle) {
    return prevAll(curEle).concat(nextAll(curEle))
}

index:獲取當前元素的索引值

function index(curEle) {
    return prevAll(curEle).length
}

firstChild:獲取當前元素的第一個子元素節點

function firstChild(curEle) {
    var childs = childern(curEle);
    return childs.length>0?childs[0]:null;
}

lastChild:獲取當前元素的最後一個子節點元素

function lastChild(curEle) {
    var childs = childern(curEle);
    return childs.length>0?childs[childs.length-1]:null;
}

append:向指定容器的末尾追加元素

function append(newEle, container) {
    container.appendChild(newEle)
}

prepend:向指定容器的開頭追加元素 -> 把新的元素添加到容器中第一個子元素節點的前面

function prepend(newEle, container) {
    var firstChild = firstChild(container);
    if(firstChild){
        container.insertBefore(newEle,firstChild)
        return
    }
    //若是一個元素都沒有,就放在末尾就好了
    container.appendChild(newEle)
}

insertBefore:把新元素(newEle)追加到指定元素(oldEle)的前面

function insertBefore(newEle, oldEle) {
    oldEle.parentNode.insertBefore(newEle, oldEle)
}

insertAfter:把新元素(newEle)追加到指定元素(oldEle)的後面，至關於追加到oldEle弟弟元素的前面

function insertAfter(newEle, oldEle) {
    var nex = next(oldEle);
    if(nex){
        oldEle.parentNode.insertBefore(newEle, nex)
        return;
    }
    //若是弟弟不存在的話,也就是說當前的元素就是最後一個了,把新元素放在最後面就好了
    oldEle.parentNode.appendChild(newEle)
}

hasClass：驗證當前元素中是否包含className這個樣式類名

function hasClass(curEle, className) {
//        curEle.className  -> "box bg"
        var reg = new RegExp("(^| +)" + className + "( +|$)");
        return reg.test(curEle.className)
}

addClass：給元素增長樣式類名

function addClass(curEle, className) {
    //爲了防止className傳遞過來的值包含多個樣式類名,咱們把傳遞進來的字符串按照一到多個空格拆分紅數組中的每一項
    var ary = className.split(/ +/g);
    //循環數組,一項一項進行驗證增長
    for (var i, len = ary.length; i < len; i++) {
        var curName = ary[i]
        if (!hasClass(curEle, curName)) {
            curEle.className += " " + curName;
        }
    }

}

removeClass：移除元素樣式名稱

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

getElementsByClass:經過元素的樣式類名來獲取元素集合

//className:要獲取的樣式類名(多是一個也多是多個)
//context:獲取元素的上下文,若是這個值不穿的話,默認爲document
function getElementsByClass(className, context) {
    context = context || document;
    //去除開頭和結尾空格
    var classNameAry = className.replace(/(^ +| +$)/g, '').split(/ +/g);
    var ary = [];
    //獲取制定上下文中的全部的元素標籤,循環這些標籤,獲取每個標籤的ClassName樣式類名的字符串
    var nodeList = context.getElementsByTagName('*');  //獲取全部元素標籤
    for (var i = 0, len = nodeList.length; i < len; i++) {
        var curNode = nodeList[i];
        //判斷curNode裏面的className是否包含所有的classNameAry中的每一項,若是都保航,就是想要的,
        不然就不是想要的
        var isOk = true; //->假設curNode中包含了全部的樣式
        for (var k = 0; k < classNameAry.length; k++) {
            var curName = classNameAry[k];
            var reg = new RegExp("(^| +)" + curName + "( +|$)");
            if (!reg.test(curNode.className)) {
                isOk = false;
                break;
            }
        }
        if (isOk) { // 拿每個標籤分別和全部的樣式類名比較後,若是結果仍是true的話,說明當前元素標
                        籤包含了全部的樣式,也是咱們想要的
            ary.push(curNode)
        }
    }
    return ary;
}
console.log(getElementsByClass('  w3    w1'));