// DOM

// 為element增加一個樣式名為newClassName的新樣式
// 另一種方法，element.classList.add(‘newClassName‘),但是存在兼容性問題（不兼容IE10以下）
function addClass(element, newClassName) {
    if (!hasClass(element, newClassName)) {
        element.className += " " + newClassName;
        // element.className += " "
        // element.className += newClassName
    }
}

// 移除element中的樣式oldClassName
// 也可以這樣子寫
// function removeClass(element, oldClassName) {
//     if (hasClass(element,oldClassName)) {
//         // 先獲取element的所有classname
//         var elementClassName = element.className;
//         // 然後把oldclassname替換掉
//         var newElementClassName = elementClassName.replace(oldClassName,"");
//         element.className = newElementClassName;
//         // 簡寫 element.className = element.className.replace(oldClassName,"")
//     }
// }
function removeClass(element, oldClassName) {
    if (hasClass(element,oldClassName)) {
        var oldClassNameReg = new RegExp("(\\s|^)" + oldClassName + "(\\s|$)");
        element.className = element.className.replace(oldClassNameReg,"");
    }
}

// 判斷siblingNode和element是否為同一個父元素下的同一級的元素，返回bool值
// var a = document.getElementByIdx_x_x("dom");
// var b = a.childNodes;   獲取a的全部子節點
// var c = a.parentNode;   獲取a的父節點
// var d = a.nextSbiling;   獲取a的下一個兄弟節點
// var e = a.previousSbiling;獲取a的上一個兄弟節點
// var f = a.firstChild;    獲取a的第一個子節點
// var g = a.lastChild;     獲取a的最後一個子節點
function isSiblingNode(element, siblingNode) {
    return element.parentNode === siblingNode.parentNode
}

// 獲取element相對於瀏覽器窗口的位置，返回一個對象{x, y}
// max() 方法可返回兩個指定的數中帶有較大的值的那個數。
function getPosition(element) {
    var position = {};
    position.x = element.getBoundingClientRect().left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);//獲取相對位置+滾動距離=絕對位置.
    position.y = element.getBoundingClientRect().top + Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    return position;
}

// 實現一個簡單的Query
function VQuery(selector, root) {
    //用來保存選擇的元素
    var elements = [];              //保存結果節點數組
    var allChildren = null;         //用來保存獲取到的臨時節點數組
    root = root || document;        //若沒有給root，賦值document
    switch (selector.charAt(0)) {   //charAt() 方法可返回指定位置的字符。
    case "#":                       //id選擇器
        elements.push(root.getElementById(selector.substring(1))); //push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度。
        break;
    case ".":                       //class選擇器
        if (root.getElementsByClassName) { //標準
            elements = root.getElementsByClassName(selector.substring(1));//substring() 方法用於提取字符串中介於兩個指定下標之間的字符。
        } else {                    //兼容低版本瀏覽器
            var reg = new RegExp("\\b" + selector.substring(1) + "\\b");
            allChildren = root.getElementsByTagName("*");
            for (var i = 0, len = allChildren.length; i < len; i++) {
                if (reg.test(allChildren[i].className)) {
                    elements.push(allChildren[i]);
                }
            }
        }
        break;
    case "[":                       //屬性選擇器
                                    // indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
        if (selector.indexOf("=") === -1) {
        //只有屬性沒有值的情況
            allChildren = root.getElementsByTagName("*");
            for (var i = 0, len = allChildren.length; i < len; i++) {
                if (allChildren[i].getAttribute(selector.slice(1, -1)) !== null) {
                    elements.push(allChildren[i]);
                }
            }
        } else {
        //既有屬性又有值的情況
            var index = selector.indexOf("="); //緩存=出現的索引位置。
            allChildren = root.getElementsByTagName("*");
            for (var i = 0, len = allChildren.length; i < len; i++) {
                if (allChildren[i].getAttribute(selector.slice(1, index)) === selector.slice(index + 1, -1)) {
                    elements.push(allChildren[i]);
                }
            }
        }
        break;
    default:                        //tagName
        elements = root.getElementsByTagName(selector);
    }
    return elements
}
/**
 * 模仿jQuery的迷你$選擇符。
 * @param   {string} selector CSS方式的選擇器，支持簡單的後代選擇器（只支持一級）
 * @returns {object} 返回獲取到的第一個節點對象，後代選擇器時，返回第一個對象中的第一個符合條件的對象
 */
function $(selector) {
//這裏trim處理輸入時兩端出現空格的情況，支持ie9+。但是這個函數實現起來也特別簡單，可以參考我task0002（-）前面有trim函數的實現。稍微修改一下，這樣就沒兼容性問題了。
    if (selector == document) {
        return document;
    }
    selector = selector.trim();
    //存在空格時，使用後代選擇器
    // selector去除前後空格後，若是字符串裏面還有空格
    if (selector.indexOf(" ") !== -1) {
        var selectorArr = selector.split(/\s+/); //分割成數組，第一項為parent，第二項為chlid。
        //這裏沒去考慮特別多的情況了，只是簡單的把參數傳入。
        return VQuery(selectorArr[1], VQuery(selectorArr[0])[0])[0];
    } else { //普通情況,只返回獲取到的第一個對象
        return VQuery(selector,document)[0];
    }
}

　　其中實現簡易query參考了這篇博文，感謝這位博主。

IFE_part2_JavaScript_DOM的具體用法