原生实现jQuery的sibling方法
<body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点,就把那个元素传进去 var a = [];//定义一个数组,用来存储o的兄弟元素 //previousSibling返回位于相同节点树层级的前一个元素 var p = o.previousSibling; while(p){//先取o的前面的兄弟元素 判断有没有上一个兄弟元素,如果有则往下执行,p表示previousSibling if(p.nodeType === 1){ a.push(p); } p = p.previousSibling//最后把上一个节点赋给p } a.reverse();//把顺序反转一下,这样元素的顺序就是按先后的了 //nextSibling返回位于相同节点树层级的下一个节点 var n = o.nextSibling;//再取o下面的兄弟元素 while(n){//判断有没有下一个兄弟结点,n是nextSibling的意思 if(n.nodeType === 1){//判断是否是元素节点 a.push(n); } n = n.nextSibling; } return a//最后按从老大到老小的顺序,把这一组元素返回 } var oH = document.getElementById("h1"); console.log(siblings(oH));//[span, div, p, script] </script> </body>
原生实现jQuery的class选择器
//用数组模拟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");
//取id="bar"下class="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; //typeof 返回String类型 if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldOnload(); func(); } } }
addClass()
/** * 为指定元素结点添加新类名 * element 元素结点 * value 类名 */ function addClass(element,value){ //如果元素类名为空,直接将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; }
以上这篇原生JS实现几个常用DOM操作API实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年09月26日
2024年09月26日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]