zoukankan      html  css  js  c++  java
  • 原生JS实现几个常用DOM操作API

    原生实现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;
    }
  • 相关阅读:
    Codeforces Round #344 (Div. 2) C. Report 其他
    Codeforces Round #344 (Div. 2) B. Print Check 水题
    Codeforces Round #344 (Div. 2) A. Interview 水题
    8VC Venture Cup 2016
    CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂 中二版
    CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂
    CDOJ 1279 班委选举 每周一题 div2 暴力
    每周算法讲堂 快速幂
    8VC Venture Cup 2016
    Educational Codeforces Round 9 F. Magic Matrix 最小生成树
  • 原文地址:https://www.cnblogs.com/huangshikun/p/6731508.html
Copyright © 2011-2022 走看看