原生实现jQuery的sibling方法
<body>
<span>我是span标签</span>
<div>我是一个div</div>
<h1 id="h1">我是标题</h1>
<p>我是一个段落</p>
<script type="text/javascript">
function siblings(o){
var a = [];
var p = o.previousSibling;
while(p){
if(p.nodeType === 1){
a.push(p);
}
p = p.previousSibling
}
a.reverse();
var n = o.nextSibling;
while(n){
if(n.nodeType === 1){
a.push(n);
}
n = n.nextSibling;
}
return a
}
var oH = document.getElementById("h1");
console.log(siblings(oH));
</script>
</body>
原生实现jQuery的class选择器
function getClassName(ParentId,NewClassName){
var AllClassElem = ParentId.getElementsByTagName(“*”);
var AllClass = [];
var i=0;
for(var i=0; i<AllClassElem.length; i++){
if(AllClassElem[i].className == NewClassName){
AllClass.push(AllClassElem[i]);
}
}
return AllClass;
}
var PElementId=document.getElementById("bar");
var buttons = getClassName(PElementId,"sco");
getElementsByClassName()
/**
* 获取指定类名的元素对象集合
* @param {Object} node 父节点
* @param {String} classname 指定类名
* @return {[Object]}目标对象集合
*/
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
addLoadEvent()
/**
* 方便的将在文档加载后运行的函数添加到window.onload中
* @param {function} func 待运行函数
*/
function addLoadEvent(func){
var oldOnload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldOnload();
func();
}
}
}
addClass()
/**
* 为指定元素结点添加新类名
* element 元素结点
* value 类名
*/
function addClass(element,value){
if(!element.className){
element.className = value;
}else{
newClassName = element.className;
newClassName += ' ';
newClassName += value;
element.className = newClassName;
}
}
insertAfter()
/**
* 在目标元素结点后面插入新的元素结点
* newElement 待插入的新元素结点
* targetElement 目标元素结点
*/
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
getNextElement()
/**
* 获取下一个元素结点
* @param {Object} node 兄结点
* @return {Object || null}下一个元素结点或未获取到
*/
function getNextElement(node){
var sibNode = node.nextSibling;
if (sibNode.nodeType == 1) {
return node;
}
if (sibNode.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}