• js之DOM间接操作


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <div>c1</div>
            <div>c2</div>
            <div>c3</div>
            <div>c4</div>
        </div>
        <div>
            <div >bnkjgjguigi
               <div id="i1">
                   b1
               </div>
            </div>
        </div>
        <div>
            <div>
                <div>a1</div>
            </div>
        </div>
    </body>
    <script>
        //获取标签的父级标签
        var tag=document.getElementById('i1');
        //找到父级标签
        var father=tag.parentNode;
        //添加一个class
        father.className='c2';
        //添加一个class
        father.classList.add('c3');
        console.log(father);
    
        //移除一个class
        // father.classList.remove('c3');
        // console.log(father);
    
        /*
        //W3C标准
        parentNode          // 父节点
        childNodes          // 所有子节点
        firstChild          // 第一个子节点
        lastChild           // 最后一个子节点
        nextSibling         // 下一个兄弟节点
        previousSibling     // 上一个兄弟节点
    
        //只支持IE
        parentElement           // 父节点标签元素
        children                // 所有子标签
        firstElementChild       // 第一个子标签元素
        lastElementChild        // 最后一个子标签元素
        nextElementtSibling     // 下一个兄弟标签元素
        previousElementSibling  // 上一个兄弟标签元素
         */
    </script>
    </html>
    

      

  • 相关阅读:
    内存管理工具
    c语言目录操作总结
    重写strstr、strcpy、memcpy、memset、atof算法
    统计编码量工具
    hdu4348
    bzoj4358: permu
    bzoj2658: [Zjoi2012]小蓝的好友(mrx)
    bzoj2657: [Zjoi2012]旅游(journey)
    bzoj3583: 杰杰的女性朋友
    bzoj3673 bzoj3674可持久化并查集
  • 原文地址:https://www.cnblogs.com/randomlee/p/9721380.html
Copyright © 2020-2023  润新知