Javascript学习(三) --------- DOM编程

最新推荐文章于 2024-05-16 09:11:52 发布

在森林中麋了鹿

最新推荐文章于 2024-05-16 09:11:52 发布

阅读量246

点赞数

分类专栏：前端基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51111980/article/details/120911175

版权

前端基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、DOM与BOM

两者的定义

DOM：
Document Object Model ---------文档对象模型：对网页当中的节点进行增删改的过程。HTML文档被当做一棵DOM树来看待。

BOM：
Browser Object Model ---------- 浏览器对象模型：主要操作有关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等。

两者的区别

BOM的顶级对象是：window
DOM的顶级对象是：document

实际上BOM包括DOM

二、JS内置对象

Date

可以用来获取时间

//获取系统当前时间
var nowTime = new Date();

//转换成本地语言环境的日期格式
now = nowTime.toLocaleString();

//获取系统当前时间戳
var times = t.getTime();//从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数

//定时器 ： 每隔多长时间调用一次函数
window.setInterval("函数", 间隔时间);

//取消定时器
window.clearInterval(定时器对象);

Array

Array内置类可以用来创建数组, 为JS中创建数组的第二种方式
var arr = new Array();
var arr1 = new Array(3);//创建了长度为3的数组
arr1.length //获取数组长度

var a = [1, 2, 3, 4];
var str = a.join("-");//数组中每个元素之间用-连接

a.push(10);//将10压入a的末尾
a.pop(); //将数组末尾的元素弹出

a.reverse();//将数组a进行反转

三、获取文本框的值

<script type="text/javascript">
   window.onload = function() {
       document.getElementById("btn").onclick = function() {
            document.getElementById("username").value = "Jack";
       }
   }
</script>

<input type = "text" id = "username"/>
<input type = "button" value = "changeingValue" id = "btn"/>

获取节点对象通过 . 的方式可以设置其属性值

四、innerText 与 innerHTML

异同

异：
innerHTML，会把后面的“字符串”当做一段HTML代码解释并执行。
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。

同：
两者都是用来设置元素内部的内容。

示例

<script type = "text/javascript">
      window.onload = function() {
          var btn = document.getElementById("div");
          btn.onclick = function() {
              var divElt = document.getElementById("div");
              divElt.innerHTML = "<font color = 'red'> 用户名不为空 </font>"
              divElt.innerText = "<font color = 'red'> 用户名不为空 </font>";
          }
     }
</script>

分别执行用innerHTML与innerText方式设置内容，用innerHTML执行" < font color = ‘red’> 用户名不为空 " 这一字符串，屏幕上出现"用户名不为空"且字体为红色。而用innerText执行屏幕上把这行代码都显示出来。

五、正则表达式

正则表达式概述

正则表达式(Regular Expression)，主要用在字符串格式匹配方面。正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持，javascript中也支持。大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。

需要掌握的内容

①常见的正则表达式符号要认识。
②简单的正则表达式要会写。
③他人编写的正则表达式要能看懂。
④在javascript当中，怎么创建正则表达式对象（new对象）
⑤在javascript当中，正则表达式对象有哪些方法（调方法）
⑥要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。

常见正则表达式符号

.  匹配除换行符外的任意字符
\w 匹配字母、数字、下划线或汉字
\s 匹配任意空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串结束

* 重复零次或更多次
+ 重复1次或更多次
? 重复0次或1次
{n} 重复n次
{n, } 重复n次或更多次
{n, m} 重复n到m次

\W 匹配任意不是字母、数字、下划线及汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x之外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

[1-9] 表示1到9的任意1个数字
[A-Za-z0-9] 表示A-Z a-z 0-9 中的任意一个字符
[A-Za-z0-9-] 表示A-Z a-z 0-9 - 中的任意一个字符
| 或者

正则表达式当中的小括号()优先级较高

正则表达式编写

QQ号正则：^ [1-9][0-9][4, ]$

以数字1 - 9开始接下来的数字可以从0-9重复4到无穷多次

email正则：^\w+([-+.]\w+)@\w+[-.]\w+).\w+([-.]\w+)*$

创建正则表达式对象

第一种方式：
    var regExp = /正则表达式/flags;
第二种方式：
    var regExp = new RegExp("正则表达式", "flags");


flags 代表匹配模式, 常用的有以下三种
g: 全局匹配
i: 忽略大小写
m: 多行搜索, ES规范制定之后才支持m. 当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用.

正则表达式对象test()方法

正则表达式对象.text(进行比较的字符串)
true : 字符串格式匹配成功
false: 字符串格式匹配失败

示例

 <script> 
       window.onload = function() {
            var email = document.getElementById("email");
            var emailValue = email.value;
            var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
            if(emailRegExp.test(emailVale)) {
                 email.innerText = "邮箱地址合法";
            } else {
                 email.innerText = "邮箱地址不合法";           
            }
       }     
</script>

<input type = "text" id = "email"/>

六、去除文本框输入值左右两侧的空格

通过使用trim()方法可以去除前后空白

<script>
window.onload = function(){
	document.getElementById("btn").onclick = function(){
	// 获取用户名
	    var username = document.getElementById("username").value;
	// 去除前后空白
	    username = username.trim();
	// 测试
	    alert(username);
	}
</script>
<input type = "text" id = "username"/>
<input type = "button" id = "btn"/>

七、表单验证

要求设计一个有以下验证功能的表单

（1）用户名不能为空
（2）用户名必须在6-14位之间
（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
（4）密码和确认密码一致，邮箱地址合法。
（5）统一失去焦点验证
（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8）最终表单中所有项均合法方可提交

实现代码为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        span {
            color: red;
            font-size: 12px;
        }
    </style>
    
       <script>
            window.onload = function () {
            var usernameErrorSpan = document.getElementById("usernameError");
            var usernameElt = document.getElementById("username");
            usernameElt.onblur = function () {
                var username = usernameElt.value;
                username = username.trim();
                if (username === "") {
                    usernameErrorSpan.innerText = "用户名不能为空";
                } else {
                    if (username.length <  6 || username.length > 14) {
                        usernameErrorSpan.innerText = "用户名长度不合法";
                    } else {
                        var regExp = /^[A-Za-z0-9]+$/;
                        if (!regExp.test(username)) {
                            usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
                        }
                    }
                }

            }
            usernameElt.onfocus = function () {
                if (usernameErrorSpan.innerText != "") {
                    usernameElt.value = "";
                }
                usernameErrorSpan.innerText = "";
            }
            var pwdErrorSpan = document.getElementById("pwdError");
            var userpwd2Elt = document.getElementById("userpwd2");
            userpwd2Elt.onblur = function () {
                var userpwdElt = document.getElementById("userpwd");
                var userpwd = userpwdElt.value;
                var userpwd2 = userpwd2Elt.value;
                if (userpwd != userpwd2) {
                    pwdErrorSpan.innerText = "密码不一致";
                }

            }
            userpwd2Elt.onfocus = function () {
                if (pwdErrorSpan.innerText != "") {
                    userpwd2Elt.value = "";
                }
                pwdErrorSpan.innerText = "";
            }
            var emailSpan = document.getElementById("emailError");
            // 给email绑定blur事件
            var emailElt = document.getElementById("email");
            emailElt.onblur = function () {
                // 获取email
                var email = emailElt.value;
                // 编写email的正则
                var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if (!emailRegExp.test(email)) {
                    emailSpan.innerText = "邮箱地址不合法";

                }
                emailElt.onfocus = function () {
                    if (emailSpan.innerText != "") {
                        emailElt.value = "";
                    }
                    emailSpan.innerText = "";
                }
                var submitBtnElt = document.getElementById("submitBtn");
                submitBtn.onclick = function () {
                    // 触发username的blur userpwd2的blur email的blur
                    // 不需要人工操作,使用纯JS代码触发事件.
                    usernameElt.focus();
                    usernameElt.blur();

                    userpwd2Elt.focus();
                    userpwd2Elt.blur();

                    emailElt.focus();
                    emailElt.blur();

                    // 当所有表单项都是合法的时候,提交表单
                    if (usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == "") {
                        // 获取表单对象
                        var userFormElt = document.getElementById("userForm");
                        // 可以在这里设置action,也可以不在这里.
                        userFormElt.action = "http://localhost:8080/jd/save";
                        // 提交表单
                        userFormElt.submit();
                    }
                }

            }
        }
       </script>

</head>

<body>
    <form id="userForm" action="http://localhost:8080/jd/save" method="post">
        用户名 <input type="text" name="username" id="username" /><span id="usernameError"></span><br>
        密码<input type="text" name="userpwd" id="userpwd" /><br>
        确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br>
        邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
        <input type="button" value="注册" id="submitBtn" />
        <input type="reset" value="重置" />
    </form>
</body>

</html>

解释以下form中的action属性

http://localhost:8080/jd/save这是请求路径，表单提交数据最终提交给：192.168.111.3机器上的8080端口对应的软件。而8080端口为被用于WWW代理服务的，可以实现网页浏览，经常在访问某个网站或使用代理服务器的时候，会加上“:8080”端口号。另外Apache Tomcat web server安装后，默认的服务端口就是8080。

请求路径格式

http://localhost:8080/jd/login?username=abc&userpwd=111
格式：action?name=value&name=value&name=value&name=value&name=value…
W3C的HTTP协议规定的，必须以这种格式提交给服务器。

八、获取下拉列表中的value

<script type = "type/javascript">
     window.onload = function() {
        var provinceListElt = document.getElementById("provinceList");
        provinceListElt.onchange = function() {
             alert(provinceListElt.value);
        }
     }
</script>
<select id="provinceList">
	<option value="">--请选择省份--</option>
	<option value="001">河北省</option>
	<option value="002">河南省</option>
	<option value="003">山东省</option>
	<option value="004">山西省</option>
</select>

onchange 对应的事件 change 在元素内容发生改变且失焦时发生改变

在森林中麋了鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript学习(三) --------- DOM编程

目录一、DOM与BOM二、JS内置对象三、获取文本框的值四、innerText 与 innerHTML五、正则表达式六、去除文本框输入值左右两侧的空格七、表单验证八、获取下拉列表中的value一、DOM与BOM两者的定义DOM：Document Object Model ---------文档对象模型：对网页当中的节点进行增删改的过程。HTML文档被当做一棵DOM树来看待。BOM：Browser Object Model ---------- 浏览器对象模型：主要操作有关闭浏览器窗口、打开
复制链接

扫一扫