原生JS实现几个常用DOM操作API实例

时间：2021-05-25

原生实现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表示previousSiblingif(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实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章