zoukankan      html  css  js  c++  java
  • dom操作

    s19.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="i1">我是i1</div>
        <a>adsf</a>
        <a>909</a>
        <a>ksdsd</a>
    </body>
    </html>
    document.getElementsByTagName('span') 通过标签种类来获取标签
    document.getElementsByClassName('c1') 通过css种类来获取标签

    tag=document.getElementById('i1') #通过id 来获取标签
    tag.innerText  获取标签内容
    tag.innertext="新内容" 修改标签内容
    document.getElementsByTagName('a')[1].innerText=666 a标签的第1个a标签的内容改成666

    批量修改标签
    tage=document.getElementsByTagName('a')
    for(var i=0;i<tage.length;i++){tage[i].innerText=999;}

     

     

     

    s20.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <div></div>
            <div>c1</div>
        </div>
        <div>
           <div></div>
            <div id="i1">c2</div>
        </div>
        <div>
            <div></div>
            <div>c3</div>
        </div>
    </body>
    </html>

    tag=document.getElementById('i1'); 通过i1来查找其他标签
    tag.parentElement i1对应标签的父标签
    tag.parentElement,children i1对应标签的父标签的子标签
    tag.parentElement.previousElementSibling 父标签的前一个标签
    tag.parentElement.previousElementSibling.children[1] 父标签的前一个标签的子标签下的第1个标签
    tag.parentElement.previousElementSibling.children[1].innerText 获取父标签的前一个标签的子标签下的第1个标签的标签内容
    tag.parentElement.previousElementSibling.children[1].innerText="c1_1" 修改父标签的前一个标签的子标签下的第1个标签的标签内容


    tag.className="c1"  添加class 整体操作
    tag.className="c2"  修改class 整体操作

    tag.classList 以列表的展现形式找出该标签所有的class
    tag.classList.add('c3') 添加class 样式
    tag.classList.remove('c2') 移除指定class 样式

    <div onclick="func();">点击执行</div> 点这个div 就会执行func()  javascript函数
    <script>
        function func() {
        }

    </script>

     

     

     

    s21.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide {
                display: none;
            }

            .c1 {
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: black;
                opacity: 0.6;
                z-index: 9;
            }

            .c2 {
                width: 500px;
                height: 400px;
                background-color: white;
                position: fixed;
                left: 50%;
                top: 50%;
                margin-left: -250px;
                margin-top: -300px;
                z-index: 10;
            }
        </style>
    </head>
    <body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="ShowMode();">
        <input type="button" value="全选" onclick="ChooseAll();">
        <input type="button" value="取消" onclick="CancleAll();">
        <input type="button" value="反选" onclick="ReverseAll();">
        <table>
            <thead>
            <tr>
                <th>请选择</th>
                <th>主机名</th>
                <th>端口</th>
            </tr>
            </thead>
            <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>90</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.2</td>
                <td>92</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.3</td>
                <td>93</td>
            </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide"></div>

    <!--遮罩层结束-->

    <!--
    弹出框开始-->
    <div id="i2" class="c2 hide">

        <p><input type="text"/></p>
        <p><input type="text"/></p>
        <p>
            <input type="button" value="取消" onclick="HideMode();"/>
            <input type="button" value="确定"/>
        </p>
    </div>
    <!--弹出框结束-->

    <script>

        function ShowMode() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideMode() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
        function ChooseAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
           
    var tr_list = tbody.children;

            for (var i = 0; i < tr_list.length; i++) {
                //循环所有的current_tr
               
    var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }}
        function CancleAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
           
    var tr_list = tbody.children;

            for (var i = 0; i < tr_list.length; i++) {
                //循环所有的current_tr
               
    var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }}
        function ReverseAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
           
    var tr_list = tbody.children;

            for (var i = 0; i < tr_list.length; i++) {
                //循环所有的current_tr
               
    var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){
                    checkbox.checked=false;
                }else {checkbox.checked=true;}
            }}
    </script>
    </body>
    </html>

     

     

    s22.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .item .header{
                height: 35px;
                background-color: #2459a2;
                color: white;
                line-height: 35px;
            }
        </style>
    </head>
    <body>
        <div style="height: 48px;"></div>

        <div style="width: 300px;">

            <div class="item">
                <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
                <div class="content">
                    <div>内容1</div>
                    <div>内容1</div>
                    <div>内容1</div>
                </div>
            </div>

            <div class="item">
                <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
                <div class="content hide">
                    <div>内容2</div>
                    <div>内容2</div>
                    <div>内容2</div>
                </div>
            </div>

            <div class="item">
                <div id="i3" class="header" onclick="ChangeMenu('i3');" >菜单3</div>
                <div class="content hide">
                    <div>内容3</div>
                    <div>内容3</div>
                    <div>内容3</div>
                </div>
            </div>

            <div class="item">
                <div id="i4" class="header" onclick="ChangeMenu('i4');" >菜单4</div>
                <div class="content hide">
                    <div>内容4</div>
                    <div>内容4</div>
                    <div>内容4</div>
                </div>
            </div>

        </div>

        <script>
            function ChangeMenu(nid) {
                var current_header=document.getElementById(nid);
                var item_list=current_header.parentElement.parentElement.children;
                for (var i=0;i<item_list.length;i++){
                    var current_item=item_list[i];
                    current_item.children[1].classList.add('hide');
                }
                current_header.nextElementSibling.classList.remove('hide');
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    Java程序员:一整个项目的具体开发流程介绍
    JAVA常用API整理
    Java开发人员必知必会的20种常用类库和API
    SpringBoot_web开发【实验】-员工列表-链接高亮&列表完成
    luogu P1754 球迷购票问题 |动态规划
    luogu P1566 加等式 |背包问题方案数
    luogu P1564 膜拜 |动态规划
    luogu P1509 找啊找啊找GF |背包
    P1474 货币系统 Money Systems |背包方案数
    cloudera安装报错 socket.gaierror: [Errno -2] Name or service not known
  • 原文地址:https://www.cnblogs.com/leiwenbin627/p/10703814.html
Copyright © 2011-2022 走看看