这篇文章就很详尽，特别适合初学者。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="chooseall()"/>
<input type="button" value="反选" onclick="resaveall()"/>
<input type="button" value="取消" onclick="bedall()"/>
<table>
    <thead>
    <tr>
        <th>请选择</th>
        <th>主机名</th>
        <th>端口号</th>
        <th>用户 密码</th>
    </tr>
    </thead>
    <tbody id="tb">
    <tr>
        <td><input name='cl' type="checkbox"/></td>
        <td>12332323</td>
        <td>12332323</td>
        <td>12332323</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>12332323</td>
        <td>12332323</td>
        <td>12332323</td>
    </tr>
    <tr>
        <td><input id="121" type="checkbox"/></td>
        <td>12332323</td>
        <td>12332323</td>
        <td>12332323</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>12332323</td>
        <td>12332323</td>
        <td>12332323</td>
    </tr>
    </tbody>
</table>
<script>
    function chooseall() {
        var tra = document.getElementById('tb')
        var tr_list = tra.children;
        for (var i in tr_list) {
            cb = tr_list[i].children[0].children[0];
            cb.checked = true;
        }
    }
    function bedall() {
        var tra = document.getElementById('tb')
        var tr_list = tra.children;
        for (var i in tr_list) {
            cb = tr_list[i].children[0].children[0];
            cb.checked = false;
        }
    }
    function resaveall() {
        var tra = document.getElementById('tb')
        var tr_list = tra.children;
        for (var i in tr_list) {
            cb = tr_list[i].children[0].children[0];
            if (cb.checked) {
                cb.checked = false;
            }
            else {
                cb.checked = true;
            }
        }
    }
</script>
</body>
</html>

全选、反选、取消的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1" >我的ID是d1</div>
<a>第1个标签</a>
<a>第2标签</a>
<a>第3个标签</a>
<a>第4个标签</a>
<a>第5个标签</a>
<a>第6个标签</a>
<input type="button" value="try" onclick="f1()"/>
<script>
    function f1() {
            document.getElementById("d1").innerText="D1修改后的标签内容。"
        a_list=document.getElementsByTagName('a')
        for (var i in a_list){
            if (a_list[i].innerText.substring(1,2)==3){
                a_list[i].innerText='这是第三个标签。';
            }
            else{
                a_list[i].innerText='新的内容';
            }
        }
    }

    </script>

</body>
</html>

利用dom选择操作标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="try" onclick="f1()"/>
<script>
        function f1(){
            var a=1;
            var b='1';
            if (a===b){
                console.log('忽略类型的相等。');

            }
            else if (a!==b){
                console.log('不仅值要相等，类型也要相同。');
            }
        }
    </script>

</body>
</html>

选择语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:100%;height:30px;background-color: ivory;
         margin:100px auto;color:red;text-align: center;font-size: 28px;"
         id="d1">欢迎上级领导到校指导工作！</div>
    <script>
        function run(){
            var tag=document.getElementById('d1');
            var cont=tag.innerText;
            var l=cont.charAt(0);
            var f=cont.substring(1,tag.length)
            cont=f+l;
            tag.innerText=cont;
        }
        setInterval('run()',200)
    </script>
</body>
</html>

跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="查看数据" onclick="f1()"/>
<script>
    function f1() {
        var list1 = [11, 22, 33, 44, 55];
        var dict1 = {"k1": "dog", "k2": "cat", "k3": "mankey"}
        for (var l in list1) {
            console.log(list1[l]);
        }
        for (var d in dict1) {
            console.log(dict1[d]);
        }
        for (var i=0;i<list1.length;i++){
            console.log(list1[i])
        }
    }

</script>
</body>
</html>

两种for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            background-color: black;
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            opacity:0.6;
            z-index: 0.3;
        }
        .c2{
            background-color: white;
            position: fixed;
            width:500px;
            height:300px;
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-250px;
            z-index:2;
        }
    </style>
</head>
<body style="margin:0;">
    <input type="button" value="新增" onclick="f1()"/>
    <div id="c1" class="hide"></div>
    <div id="c2" class="hide" >
        <input type="button" style="margin:145px 245px;" value="返回" onclick="f2()"/>
    </div>
<script>
    function f1(){
        document.getElementById('c1').className='c1';
        document.getElementById('c2').className='c2';
    }
    function f2() {
        document.getElementById('c1').className='hide';
        document.getElementById('c2').className='hide';
    }
</script>
</body>
</html>

三层模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1" type="button" value="通过字符串插入" onclick='AddElement()'/>
    <input id="i2" type="button" value="通过对象插入" onclick='AddElement2()'/>
    <div id="d1">
        <input type="text"/>
    </div>
    <script>
        function AddElement(){
            tag='<p><input type="text"/></p>';
            obj=document.getElementById('d1');
            obj.insertAdjacentHTML('beforeEnd',tag)
        }
        function AddElement2(){
             obj=document.getElementById('d1');
             tag=document.createElement('input');
             tag.setAttribute('type','text');
             p=document.createElement('p');
             p.appendChild(tag);
             obj.appendChild(p);
        }
    </script>

</body>
</html>

插入标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!-- 各个标签通过JS的submit()方法，都可以提交表单。
 9     <form  id='f1' action="http://www.baidu.com">-->
10         <!--<input type="text"/>-->
11     <!--</form>-->
12     <!--<img src="icon.png" onclick="submitForm()"/>-->
13     <!--<script>-->
14         <!--function submitForm(){-->
15             <!--document.getElementById('f1').submit();-->
16         <!--}-->
17     <!--</script>-->
18     <!--两个弹窗的例子，一个是alert，弹出提示。另一个是confirm，可以出现确认框返回值true false
19     <input type="button" value="点我" onclick="temp()"/>-->
20     <!--<script>-->
21         <!--function temp(){-->
22 
23             <!--rse=confirm("请确认是否提交！");-->
24             <!--if (rse==true){-->
25                 <!--alert('数据已提交。')-->
26             <!--}-->
27         <!--}-->
28 
29     <!--</script>-->
30     <input type="button" value="---" onclick="cla()"/>
31     <input type="button" value="****" onclick="clb()"/>
32     <script>
33         a=setInterval(function ()
34         {console.log(1)},1000);
35         function cla(){
36                   clearInterval(a);
37             }
38         b=setTimeout(function(){
39            alert('已经过了5秒钟。')
40         },5000)
41         function clb () {
42             clearTimeout(b);
43         }
44     </script>
45 
46 </body>
47 
48 </html>

关于DOM的基本操作

posted @ 2018-05-20 12:21 LZ鱼乐阅读(168) 评论(0) 收藏举报

刷新页面返回顶部

py01

js

公告