首页 > 代码库 > 原生JS实现几个常用DOM操作API

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

2024-09-15 22:35:47   217人阅读

原生实现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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

原生实现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"的元素；
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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);
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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();
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

addClass()

/**
* 为指定元素结点添加新类名
* element 元素结点
* value 类名
*/
function addClass(element,value){
//如果元素类名为空，直接将value赋值给相应的元素类名
    if(!element.className){
        element.className = value;
    }else{
    //否则需要将类名之间用空格隔开
        newClassName = element.className;
        //多个类名间添加空格
        newClassName += ‘ ‘;
        newClassName += value;
        element.className = newClassName;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

insertAfter()

/**
* 在目标元素结点后面插入新的元素结点
* newElement 待插入的新元素结点
* targetElement 目标元素结点
*/
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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


联系
我们