zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    404. Sum of Left Leaves
    400. Nth Digit
    42. Trapping Rain Water
    154. Find Minimum in Rotated Sorted Array II
    [USACO4.2]草地排水Drainage Ditches
    [NOIP2010提高组]关押罪犯
    [洛谷P1580]yyy loves Easter_Egg I
    [洛谷P1144]最短路计数
    [洛谷P1346]电车
    [codevs1243]网络提速
  • 原文地址:https://www.cnblogs.com/randomlee/p/9721380.html
Copyright © 2011-2022 走看看