原生JS实现几个常用DOM操作API实例
原生实现jQuery的sibling方法
<body>
<span>我是span标签</span>
<div>我是一个div</div>
<h1id="h1">我是标题</h1>
<p>我是一个段落</p>
<scripttype="text/javascript">
//获取元素的兄弟节点
functionsiblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去
vara=[];//定义一个数组，用来存储o的兄弟元素
//previousSibling返回位于相同节点树层级的前一个元素
varp=o.previousSibling;
while(p){//先取o的前面的兄弟元素判断有没有上一个兄弟元素，如果有则往下执行，p表示previousSibling
if(p.nodeType===1){
a.push(p);
}
p=p.previousSibling//最后把上一个节点赋给p
}
a.reverse();//把顺序反转一下，这样元素的顺序就是按先后的了
//nextSibling返回位于相同节点树层级的下一个节点
varn=o.nextSibling;//再取o下面的兄弟元素
while(n){//判断有没有下一个兄弟结点，n是nextSibling的意思
if(n.nodeType===1){//判断是否是元素节点
a.push(n);
}
n=n.nextSibling;
}
returna//最后按从老大到老小的顺序，把这一组元素返回
}
varoH=document.getElementById("h1");
console.log(siblings(oH));//[span,div,p,script]
</script>
</body>
原生实现jQuery的class选择器
//用数组模拟jQuery的class选择器
functiongetClassName(ParentId,NewClassName){
varAllClassElem=ParentId.getElementsByTagName(“*”);
varAllClass=[];
vari=0;
for(vari=0;i<AllClassElem.length;i++){
if(AllClassElem[i].className==NewClassName){
AllClass.push(AllClassElem[i]);
}
}
returnAllClass;
}
//用法：
varPElementId=document.getElementById("bar");
varbuttons=getClassName(PElementId,"sco");
//取id="bar"下class="sco"的元素；
getElementsByClassName()
/**
*获取指定类名的元素对象集合
*@param{Object}node父节点
*@param{String}classname指定类名
*@return{[Object]}目标对象集合
*/
functiongetElementsByClassName(node,classname){
//如果浏览器支持则直接使用
if(node.getElementsByClassName){
returnnode.getElementsByClassName(classname);
}else{
return(functiongetElementsByClass(searchClass,node){
if(node==null)
node=document;
varclassElements=[],
els=node.getElementsByTagName("*"),
elsLen=els.length,
pattern=newRegExp("(^|\\s)"+searchClass+"(\\s|$)"),i,j;
for(i=0,j=0;i<elsLen;i++){
if(pattern.test(els[i].className)){
classElements[j]=els[i];
j++;
}
}
returnclassElements;
})(classname,node);
}
}
addLoadEvent()
/**
*方便的将在文档加载后运行的函数添加到window.onload中
*@param{function}func待运行函数
*/
functionaddLoadEvent(func){
varoldOnload=window.onload;
//typeof返回String类型
if(typeofwindow.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldOnload();
func();
}
}
}
addClass()
/**
*为指定元素结点添加新类名
*element元素结点
*value类名
*/
functionaddClass(element,value){
//如果元素类名为空，直接将value赋值给相应的元素类名
if(!element.className){
element.className=value;
}else{
//否则需要将类名之间用空格隔开
newClassName=element.className;
//多个类名间添加空格
newClassName+='';
newClassName+=value;
element.className=newClassName;
}
}
insertAfter()
/**
*在目标元素结点后面插入新的元素结点
*newElement待插入的新元素结点
*targetElement目标元素结点
*/
functioninsertAfter(newElement,targetElement){
varparent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
getNextElement()
/**
*获取下一个元素结点
*@param{Object}node兄结点
*@return{Object||null}下一个元素结点或未获取到
*/
functiongetNextElement(node){
varsibNode=node.nextSibling;
if(sibNode.nodeType==1){
returnnode;
}
if(sibNode.nextSibling){
//递归调用
returngetNextElement(node.nextSibling);
}
returnnull;
}
以上这篇原生JS实现几个常用DOM操作API实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。