DOM操作的增強版功能函數
/**
* 將一個DOM節點、HTML字符串混合型參數
* 轉化爲原生的DOM節點數組
*
* */
function checkElem(a) {
var r = [];
if (a.constructor != Array) {
//如果不是參數數組,則強行轉換
a = [a];
}
for (var i = 0; i < a.length; i++) {
//如果是字符串,例如"<li>aa</li>"
if (a[i].constructor == String) {
//使用一個臨時元素來存放HTML
var div = document.createElement("div");
//注入HTML,轉換成DOM結構
div.innerHTML = a[i];
for (var j = 0; j < div.childNodes.length; j++) {
r[r.length] = div.childNodes[j];
}
} else if (a[i].length) {
//假定是DOM節點數組
for (var j = 0; j < a[i].length; j++) {
r[r.length] = a[i][j];
}
} else {
//DOM節點
r[r.length] = a[i];
}
}
return r;
}
/**
* 在parent執行環境下,在before元素下前面添加elem元素
* */
function before(parent, before, elem) {
//檢查是否提供parent節點參數
if (elem == null) {
elem = before;
before = parent;
parent = before.parentNode;
}
//獲取元素的新數組
var elems = checkElem(elem);
/**
* 向後遍歷數組,
* 因爲我們向前插入元素
* */
for (var i = elems.length - 1; i >= 0; i--) {
parent.insertBefore(elem[i], before);
}
}
/**
* 爲parent追加一個子元素的輔助函數
*
* */
function append(parent, elem) {
var elems = checkElem(elem);
for(var i = 0; i <= elems.length; i++){
parent.appendChild(elems[i]);
}
}
/**
* 刪除elem節點函數
*
* */
function remove(elem) {
if(elem) {
elem.parentNode.removeChild(elem);
}
}
/**
* 從一個元素中刪除所有子節點的函數
*
* */
function empty(elem) {
while(elem.firstChild) {
remove(elem.firstChild);
}
}
代碼來源:https://gist.github.com/hehongwei44/31ce781d77ca33baea48
創建DOM元素的通用函數
/*創建DOM元素的通用函數*/
function create (elem) {
return document.createElementNS ? document.createElementNS('http://' +
'www.w3.org/1999/xhtml', elem) : document.createElement(elem);
}
//如果提供的是字符串,則把它轉化成文本節點.
function checkElem(elem) {
return elem && elem.constructor == "String" ? document.createTextNode(elem) : elem;
}
//在parent執行環境下,在before元素下前面添加elem元素
function before(parent, before, elem){
/*
* 如果不提供parent的情況下,則before接受parent參數,elem接受before的參數。
* ps:該方法處理很獨特,值得借鑑
* */
if(elem == null) {
elem = before;
before = parent;
parent = before.parent;
}
parent.insertBefore(checkElem(elem),before);
}
//爲parent追加一個子元素的輔助函數
function append(parent, elem){
parent.appendChild(elem);
}
代碼來源:https://gist.github.com/hehongwei44/b449b9081b00bc1dc6ac
檢查元素是否有一個指定的特性
/*檢查元素是否有一個指定的特性*/
function hasAttribute(elem, name) {
// !!表達式快速的求bool值
return !!elem.getAttribute(name);
}
代碼來源:https://gist.github.com/hehongwei44/fb9789ef08a2ef9c7ec3
獲取元素文本內容的通用函數
/*獲取元素文本內容的通用函數*/
function text(e) {
var str = "";
//判斷元素是否包含子元素
e = e.childNodes || e;
//遍歷子元素,獲取其文本內容
for (var i = 0; i < e.length; i++) {
//如果子元素下面還包含子元素,則遞歸執行
str += e[i].nodeType != 1 ? (e[i].nodeValue) : text(e[i].childNodes);
}
return str;
}
代碼來源:https://gist.github.com/hehongwei44/08429d872a5f19ca7d6b
簡單的DOM的API封裝
/*根據ID獲取元素*/
var $id = function(id){
return document.getElementById(id);
};
/*根據標籤名獲取元素,返回元素的節點僞數組*/
var $tag = function(tagName, parent){
return (parent || document).getElementsByTagName(tagName);
};
/*根據樣式名獲取元素,返回元素的節點數組。其中className是必填項目*/
var $class = function (className, tagName, parent) {
//元素可能存在多個className,故匹配我們所需要的className
var re = new RegExp('(^|\\s)' + className + '(\\s|$)'), node = [];
if (arguments.length === 1) {
//只傳入className
tagName = "*";
parent = document;
} else if (arguments.length === 2 && tagName.constructor === "String") {
//傳入ClassName和節點類型
parent = document;
} else if (arguments.length === 2 && tagName.constructor !== "String") {
//傳入ClassName和父親節點
tagName = "*"
} else if (arguments.length === 3) {
//傳入ClassName和節點類型以及父親節點
}
var nodebyTag = parent.getElementsByTagName(tagName);
for (var i = 0; i < nodebyTag.length; i++) {
if (re.test(nodebyTag[i].className)) {
node.push(nodebyTag[i]);
}
}
return node;
}
代碼來源:https://gist.github.com/hehongwei44/d608126f5b3407220932
通過原型拓展來實現DOM的查找方法。
//查找相關元素的前一個兄弟元素的方法。
HTMLElement.prototype.prev = function () {
var elem = this;
do {
elem = elem.previousSibling;
} while (elem && elem.nodeType != 1);
return elem;
};
//查找相關元素的下一個兄弟元素的方法。
HTMLElement.prototype.next = function () {
var elem = this;
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
};
//查找元素第一個子元素的方法。
HTMLElement.prototype.first = function () {
var elem = this.firstChild;
//文本節點
if(elem && elem.nodeType != 1){
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
}
return elem;
};
//查找元素的最後一個子元素的方法。
HTMLElement.prototype.last = function () {
var elem = this.lastChild;
do {
elem = elem.previousSibling;
} while (elem && elem.nodeType != 1);
return elem;
};
//查找元素指定層級的父元素。
HTMLElement.prototype.parent = function (num){
var elem = this;
num = num || 1;
for( var i = 0; i < num; i++)
if(elem != null) elem = elem.parentNode;
return elem;
};
代碼來源:https://gist.github.com/hehongwei44/7614a218810410b31ff4
dom一些常用的操作方法介紹
//查找相關元素的前一個兄弟元素的方法。
function prev(elem) {
do {
elem = elem.previousSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
//查找相關元素的下一個兄弟元素的方法。
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
//查找元素第一個子元素的方法。
function first(elem) {
elem = elem.firstChild;
return (elem && elem.nodeType != 1) ? next(elem) : elem;
}
//查找元素的最後一個子元素的方法。
function last(elem) {
elem = elem.lastChild;
return (elem && elem.nodeType != 1) ? prev(elem) : elem;
}
//查找元素指定層級的父元素。
function parent(elem, num){
num = num || 1;
for( var i = 0; i < num; i++)
if(elem != null) elem = elem.parentNode;
return elem;
}
代碼來源:https://gist.github.com/hehongwei44/11e82b38b00aa63b0876