DOM2

Posted 2020-09-09 liusheng11188

样式

通过修改元素的style属性来操作样式
js中的style对象提供了很多属性，对应着css的相关样式
这里的写法与css中基本相同
如果在css中有“-”的样式，把“-”去掉将单词首字母变成大写
对于某些元素拥有的属性，可能在提示中不存在，直接写就可以了
设置样式类：dvObj.className=‘类名称‘;

 1  onload = function () {
 2             //获取容器
 3             var div1 = document.getElementById(‘div1‘);
 4             
 5             //循环创建5个超链接
 6             for (var i = 0; i < 5; i++) {
 7                 //创建a对象
 8                 var a1 = document.createElement(‘a‘);
 9                 //为属性赋值
10                 a1.href = ‘http://www.itcast.cn‘;
11                 a1.innerhtml = ‘链接‘ + i;
12                 a1.onclick = function() {
13                     //设置背景色为红色
14                     this.style.backgroundColor = ‘red‘;
15                     return false;
16                 };
17                 //追加到容器中
18                 div1.appendChild(a1);
19             }
20         };

 

 

练习  透视图

 <script>
        onload = function () {
            //根据标签获取body元素
            var body = document.getElementsByTagName(‘body‘)[0];
            //规定初始值
            var width = 500, height = 500, left = 10, top = 10;
            //循环创建div
            while (true) {
                //创建div加入body中
                var div1 = document.createElement(‘div‘);
                div1.style.position = ‘absolute‘;
                div1.style.left = left + ‘px‘;
                div1.style.top = top + ‘px‘;
                div1.style.border = ‘1px solid blue‘;
                div1.style.width = width + ‘px‘;
                div1.style.height = height + ‘px‘;
                body.appendChild(div1);
                
                //改写数值
                left += 5;
                top += 5;
                width -= 10;
                height -= 10;
                
                //当div的宽度<=0时，在页面上不会显示，所以退出循环
                if (width <= 0) {
                    break;
                }
            }
        };
    </script>

表单

 <script>
        var bgColor;
        var list = [
            { id: ‘1‘, country: ‘中国‘, capital: ‘北京‘ },
            { id: ‘2‘, country: ‘美国‘, capital: ‘华盛顿‘ },
            { id: ‘3‘, country: ‘日本‘, capital: ‘东京‘ },
            { id: ‘4‘, country: ‘韩国‘, capital: ‘首尔‘ }
        ];
        onload = function() {
            var body = document.getElementsByTagName(‘body‘)[0];
            
            //创建表格
            var table = document.createElement(‘table‘);
            table.border = 1;
            body.appendChild(table);
            
            //创建标题行
            var thead = document.createElement(‘thead‘);
            var item0 = list[0];
            for (var key0 in item0) {
                //创建标题单元格
                var th = document.createElement(‘th‘);
                th.innerText = key0;
                thead.appendChild(th);
            }
            table.appendChild(thead);

            for (var i = 0; i < list.length; i++) {
                //遍历对象
                var item = list[i];
                //创建行
                var tr = document.createElement(‘tr‘);
                table.appendChild(tr);
                //注册事件
                tr.onmouseover = function () {//指向行时高亮
                    //改变颜色前，先获取值，用于恢复
                    bgColor = this.style.backgroundColor;
                    this.style.backgroundColor = ‘green‘;
                };
                tr.onmouseout = function() {//移开行时恢复原来颜色
                    this.style.backgroundColor = bgColor;
                };
                //设置行的背景色
                if (i % 2 == 0) {
                    tr.style.backgroundColor = ‘red‘;
                } else {
                    tr.style.backgroundColor = ‘blue‘;
                }
                
                //遍历对象
                for (var key in item) {
                    //创建单元格
                    var td = document.createElement(‘td‘);
                    td.innerText = item[key];
                    tr.appendChild(td);
                }
            }
        };
    </script>

 

 

隐藏和显示

  <script>
        onload = function() {
            document.getElementById(‘btnShow‘).onclick = function () {
                var divShow = document.getElementById(‘divShow‘);
                if (this.value == ‘隐藏‘) {
                    this.value = ‘显示‘;
                    divShow.style.display = ‘none‘;//控制层隐藏
                } else {
                    this.value = ‘隐藏‘;
                    divShow.style.display = ‘block‘;//控制层显示
                }
            };
        };
    </script>

 

显示

控制层的隐藏和显示
通过设置样式display控制显示与隐藏
值为‘‘表示显示,block
值为‘none‘表示隐藏

示例：点击按钮，控制div的显示与隐藏，并同时更新按钮提示文本

 1  <script>
 2         onload = function () {
 3             //获取所有按钮
 4             var btns = document.getElementsByTagName(‘input‘);
 5             //遍历按钮，绑定事件
 6             for (var i = 0; i < btns.length; i++) {
 7                 btns[i].onmouseover = function(e) {
 8                     //显示div，内容是id
 9                     //获取div
10                     var divShowId = document.getElementById(‘divShowId‘);
11                     divShowId.textContent = this.id;
12                     //显示
13                     divShowId.style.display = ‘block‘;
14                     //定义位置
15                     divShowId.style.left = e.clientX + ‘px‘;
16                     divShowId.style.top = e.clientY + ‘px‘;
17                 };
18                 btns[i].onmouseout = function() {
19                     //隐藏div
20                     //获取div
21                     var divShowId = document.getElementById(‘divShowId‘);
22                     //隐藏
23                     divShowId.style.display = ‘none‘;
24                 };
25             }
26         };
27     </script>

 

表单的提交

 

表格对象
使用传统方式进行表单提交：点击submit按钮
事件onsubmit：表示在提交前触发，一般用于进行控件内容的有效性验证
如果返回false则会停止提交
如果返回true或者不返回则完成提交

问：如果在不点击提交按钮时进行提交呢？
方式一：调用按钮的click()方法，模拟点击
方式二：调用表单的submit()方法，这种提交不会触发onsubmit事件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        // 1、表单提交会触发onsubmit事件，不想提交使用return false;
        //2、模拟事件：onclick->click()
        //3、form.submit直接提交，不会触发onsubmit事件
        
        onload = function() {
            var form1 = document.getElementById(‘form1‘);
            form1.onsubmit = function() {
                alert(1);
                //return false;//停止转向
            };

            var submit1 = document.getElementById(‘submit1‘);
            submit1.onclick = function () {
                //模拟表单提交方式一：
                //form1.submit();//这种方式不会触发 onsubmit事件
                
                //模拟表单提交方式二：
                //将事件当作一个方法用，会模拟用户对这个控件的事件操作
                //去掉on
                //form1.onsubmit();
                document.getElementById(‘submit2‘).click();
            };
        };
    </script>
</head>
    <body>
        submit按钮可以让form完成提交，提交时会触发onsubmit事件
        <br/>
        onsubmit事件的作用：可以在转向页面前，进行数据的有效性验证
        <br/>
        取消提交的方式：return false;
        <br/>
        <form id="form1" action="hello.html">
            <input type="button" id="submit1" value="模拟提交"/>
            <input type="text"/>
            <input type="submit" id="submit2"/>
        </form>
    </body>
</html>

 显示密码强度

 1  <script>
 2         onload = function () {
 3             //为文本框注册失去焦点事件，失去焦点时，进行密码验证
 4             document.getElementById(‘txtPwd‘).onblur = function () {
 5                 var msg = this.value;
 6 
 7                 //获取提示框
 8                 var msgPwd = document.getElementById(‘msgPwd‘);
 9 
10                 if (msg.length < 6) {
11                     msgPwd.innerText = ‘弱爆了‘;
12                 } else {
13                     //纯字符：弱，两种混合：中，三种混合：强
14                     var pwd = 0;
15                     if (/[a-zA-Z]/.test(msg)) {
16                         pwd++;//有一个字母
17                     }
18                     if (/[0-9]/.test(msg)) {
19                         pwd++;//有一个数字
20                     }
21                     if (/[[email protected]#$%^&*()]/.test(msg)) {
22                         pwd++;//有一个特殊字符
23                     }
24                     //提示结果
25                     switch (pwd) {
26                         case 1:
27                             msgPwd.innerText = ‘弱‘;
28                             break;
29                         case 2:
30                             msgPwd.innerText = ‘中‘;
31                             break;
32                         case 3:
33                             msgPwd.innerText = ‘强‘;
34                             break;
35                     }
36                 }
37             };
38         };
39     </script>

 

正则在dom里面的使用