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>
  • 相关阅读:
    Gitlab使用腾讯企业邮箱
    查看Binlog内容
    微信小游戏手记
    clickhouse手记
    腾讯云手记
    go框架gin
    go idea debug
    go手记
    crontab手记
    Laravel-cors 跨域
  • 原文地址：https://www.cnblogs.com/leiwenbin627/p/10703814.html
Copyright © 2011-2022 走看看