Last active
December 31, 2015 11:49
-
-
Save aa65535/7982000 to your computer and use it in GitHub Desktop.
仿jQuery的DOM操作方法,只有基本的操作。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 所有方法都在最后返回当前元素(包括appendTo和prependTo) | |
// 可以使用链式写法 | |
// append方法 向匹配的元素内部追加内容 | |
// 参数可以是字符串或者是使用createElement()方法创建的DOM对象 | |
Node.prototype.append = function(ele) { | |
if (typeof ele === 'string') { | |
var t = document.createElement('div'); | |
t.innerHTML = ele; | |
while (t.firstChild) { | |
this.append(t.firstChild); | |
} | |
} else if ('append' in ele) { | |
this.appendChild(ele); | |
} | |
return this; | |
}; | |
// appendTo方法 把所有匹配的元素追加到另一个指定的元素或元素集合中 | |
// 参数可以是单个元素(Node)或者元素集合(NodeList) | |
Node.prototype.appendTo = function(ele) { | |
if (typeof ele.length === 'number') { | |
for (var i = 0; i < ele.length; i++) { | |
this.appendTo(ele[i]); | |
} | |
} else if ('append' in ele) { | |
var t = document.createElement('div'); | |
t.appendChild(this); | |
ele.append(t.innerHTML); | |
} | |
return this; | |
}; | |
// prepend方法 向匹配的元素内部前置内容 | |
// 参数可以是字符串或者是使用createElement()方法创建的DOM对象 | |
Node.prototype.prepend = function(ele) { | |
if (!this.firstChild) { | |
this.firstChild.before(ele); | |
} else { | |
this.append(ele); | |
} | |
return this; | |
}; | |
// prependTo方法 把所匹配的元素前置到另一个指定的元素或元素集合中 | |
// 参数可以是单个元素(Node)或者元素集合(NodeList) | |
Node.prototype.prependTo = function(ele) { | |
if (typeof ele.length === 'number') { | |
for (var i = 0; i < ele.length; i++) { | |
this.appendTo(ele[i]); | |
} | |
} else if ('prepend' in ele) { | |
var t = document.createElement('div'); | |
t.appendChild(this); | |
ele.prepend(t.innerHTML); | |
} | |
return this; | |
}; | |
// before方法 在匹配的元素之前插入内容(同级元素) | |
// 参数可以是字符串或者是使用createElement()方法创建的DOM对象 | |
Node.prototype.before = function(ele) { | |
if (typeof ele === 'string') { | |
var t = document.createElement('div'); | |
t.innerHTML = ele; | |
while (t.firstChild) { | |
this.before(t.firstChild); | |
} | |
} else if ('before' in ele) { | |
this.parentNode.insertBefore(ele, this); | |
} | |
return this; | |
}; | |
// after方法 在匹配的元素之后插入内容(同级元素) | |
// 参数可以是字符串或者是使用createElement()方法创建的DOM对象 | |
Node.prototype.after = function(ele) { | |
if (typeof ele === 'string') { | |
var t = document.createElement('div'); | |
t.innerHTML = ele; | |
while (t.lastChild) { | |
this.after(t.lastChild); | |
} | |
} else if ('after' in ele) { | |
if (!this.nextSibling) { | |
this.parentNode.appendChild(ele); | |
} else { | |
this.parentNode.insertBefore(ele, this.nextSibling); | |
} | |
} | |
return this; | |
}; | |
// empty方法 删除匹配的元素中所有的子节点 | |
// 此方法无参数 | |
Node.prototype.empty = function() { | |
while (this.firstChild) { | |
this.removeChild(this.firstChild); | |
} | |
return this; | |
}; | |
// remove方法 从DOM中删除所匹配的元素 | |
// 此方法无参数 | |
Node.prototype.remove = function() { | |
this.parentNode.removeChild(this); | |
return this; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment