Skip to content

Instantly share code, notes, and snippets.

@aa65535
Last active December 31, 2015 11:49
Show Gist options
  • Save aa65535/7982000 to your computer and use it in GitHub Desktop.
Save aa65535/7982000 to your computer and use it in GitHub Desktop.
仿jQuery的DOM操作方法,只有基本的操作。
// 所有方法都在最后返回当前元素(包括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