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>
    

      

  • 相关阅读:
    性能
    .Net 平台下的互联网架构新思考
    bootstrap-paginator 分页插件笔记
    HTTP 报文中的 Header 字段进行身份验证
    .NET简单企业应用
    djngo快速实现--使用Bootstrap
    Knockout应用开发指南
    Linux下OpenCV的环境搭建(转)
    初识树莓派(转)
    网络名词解释
  • 原文地址:https://www.cnblogs.com/randomlee/p/9721380.html
Copyright © 2011-2022 走看看