JavaScript的DOM和BOM编程
文章目录
本片博客总结一下最近学习的JavaScript的DOM编程,这是JavaScript中比较重要的一个模块!
1. BOM编程(了解学习)
BOM编程需要了解如下四个对象:
js引擎在解析html页面的时候,将html页面主要分为以下四个对象:
1. 窗口对象:window
窗口对象:window ,所有BOM编程的*对象
- 如打开资源文件的方法:open();
- 定时器相关的方法;
-
和弹框相关的方法: ⭐
- alert(“消息对话框”):弹出的框框只有确定按钮
- confirm(”确认提示框“):弹出的框框有确定和取消两种按钮
- prompt(”输入提示“):弹出的框框有个文本输入框,可以进行文本输入,下面有个确认按钮;
2. 地址栏对象:location
-
href属性:更改页面地址(页面跳转)⭐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn() { //执行下面就会跳转到#.html页面 window.location.href = "#.html"; } </script> </head> <body> <button onclick="btn()">执行跳转</button> </body> </html>
-
reload()方法 :刷新当前页面;
3. 历史记录对象:history
-
back:从历史列表中装入前一个URL (回退到上一个页面)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btnBack() { //回退到上一个url window.history.back(); } </script> </head> <body> <button onclick="btnBack()">回退</button> </body> </html>
-
forward:从历史列表中装入下一个URL (即加载下一个页面,前进操作)
-
go:从历史列表中装入URL (到达指定页面)
4. 屏幕对象:screen
一些关于屏幕参数的属性和方法,不用深入了解;
2. DOM编程
1. DOM编程入门
先来看这样一个html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>按钮</button>
<input type="text"/>
</body>
</html>
运行得到下面的结果:
浏览器内置的JavaScript解析器将html页面解析的时候,将每一个标签封装成对象(节点对象),从文档开始到文档结束(树状结构),就叫DOM;
我们分析上面的源码,大致可以形成下面这个树状结构:
DOM编程的使用步骤:
- (1):通过特定方法/特定属性控制标签对象;
- (2):通过标签对象更改标签里面属性或者样式,展示效果(通过业务)
2. 获取标签对象的三种方式
有3种方式来获取标签对象:
1. document集合属性来获取标签对象
document集合属性来获取标签对象(all属性)————了解这一种方式即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<img src="#" />
<a href="#"></a>
</form>
</body>
<script>
var nodeList = document.all;
for(var i=0; i<nodeList.length; i++) {
//输出每个标签对象的名字
document.write(nodeList[i].nodeName+" ");
}
</script>
</html>
网页输出:
HTML HEAD META TITLE BODY FORM IMG A SCRIPT
可以看到自上而下的输出了所有的标签对象;
2. 查询节点关系来获取标签对象
每个节点对象都有如下属性: (通过这些属性可以遍历整个节点树了嘛!)
- parentNode:父节点
- childNodes:所有的子节点
- firstChild:第一个子节点
- lastChild:最后一个子节点
- nextSibling:下一个兄弟节点
- previousSibling:上一个兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<img src="#" />
<a href="#"></a>
</form>
</body>
<script>
//下面这个获取到的节点对象是A标签对象,也就是最内层的那个标签对象
var aNode = document.links[0];
document.write(aNode.nodeName+" ");
//获取第一个子节点
document.write(aNode.parentNode.nodeName);
</script>
</html>
**网页输出:**A FORM
3. 通过document对象的方法获取⭐(最常用)
下面四种方法中前两种最常用;
-
getElementById(“id属性值”):通过id属性值获取
(特点:id属性值在当前html一定是唯一的) - getElementsByClassName(“class属性值”):通过class属性值获取标签对象,返回标签对象列表
- getElementsByName(“name属性值”):通过name属性获取标签对象
- getElementsByTagName(“标签名称”):通过标签名称获取
这里举个例子: (用的第一种方式来获取标签对象,其他几种就不再举例了)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function textBlur() {
//通过id属性获取标签对象
var userName = document.getElementById("user");
alert(userName.value);
}
</script>
<body>
<!--失去焦点事件:onblur,就是你的鼠标离开这个input标签的时候就会调用后面指定的js函数-->
用户名:<input id="user" type="text" onblur="textBlur()" />
</body>
</html>
网页输出:
这里我就不截图了,直接描述,当我运行后,会产生一个文本框,鼠标点击文本框进行输入,鼠标一旦离开这个文本框,就会弹窗提示,提示内容就是你在文本框输入的内容;
3. js的事件编程
在Java中也有事件编程,为GUI编程,但现在已经被淘汰了
事件编程三要素:
- (1):确定事件源: 确定标签
- (2):事件监听器: 编写事件函数(业务处理)
- (3):绑定/注册事件监听 :通过特定事件把函数进行绑定
1. 事件基础案例
下面来看个栗子: (对应的解释在注释中哟)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//这个函数就是事件监听器
function btnClick(){
alert("已点击");
}
</script>
<body>
<!--button就是事件源-->
<button onclick="btnClick()">点我</button>
</body>
</html>
2. 常用事件分类 ⭐
(1):按键抬起事件
应用场景:模拟百度搜索
(2):点击相关事件
- onclick:单击
- ondbclick:双击
(3):焦点相关事件
-
onfocus:获取焦点(也就是一个input标签,我鼠标进入那个输入框并点击后就会触发对应函数)
-
onblur:失去焦点 ⭐
下面看一个栗子:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> //这个函数就是事件监听器 function obr(){ var name = document.getElementById("name").value; var span = document.getElementById("span_Tip"); if(name != "Bob") { //这是原生做法,后面用正则表达式验证 span.innerHTML = "用户名可用".fontcolor("greeyellow"); }else { span.innerHTML = "用户名不可用".fontcolor("red"); } } </script> <body> 用户名: <input id="name" type="text" onblur="obr()" /> <span id="span_Tip"></span> <br /> </body> </html>
运行后的结果: (文字描述)
会产生一个输入框,如果我输入的不是Bob,当我鼠标离开文本框并点击一下时,就会在文本框后面输出绿色的“用户名可用”字样,如果输入的是Bob,当鼠标随便点击文本框以外的区域,就会在文本框后面输出红色的“用户名不可用”;
(4):选项卡发生变动事件
- onchange
- 栗子:省市联动
(5)鼠标相关的事件
-
onmouseover:鼠标经过事件
-
onmouseout:鼠标移出事件
下面看这个栗子:
先来创建一个块标签,并用CSS修饰它;<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; /*指定宽度*/ height: 200px; /*指定高度*/ border: 1px solid #FF0000; /*指定边框大小*/ } </style> </head> <script> function mouseOver(){ alert("鼠标经过了这个快标签!!!"); } </script> <body> <div id="div1" onmouseover="mouseOver()"> 里面的内容 </div> </body> </html>
输出:
当我鼠标滑过那个div的时候,就会弹出上面的提示框;
(6):页面载入事件
- 一般在body后面指定onload事件,将body中的内容全部加载完毕再去执行函数onload;
4. js正则表达式介绍
通过一些特定字符校验用户输入的字符串是否符合正则表达式规则;
什么是正则表达式:
通过一些特定字符校验用户输入的字符串是否符合正则规则;
应用场景:登陆/注册
数量词:
- X+:X字符出现一次或多次(常用);
- X*:X字符出现0次或多次;
- X?:X字符出现0次或一次;
[a-zA-Z0-9]:当前字符不区分大小写,并且还可以是数字;
[a-zA-Z]:只能是字母,不区分大小写;
X{n}:X字符恰好出现n次;
X{n,}:X字符至少n次;
正则表达式格式: ⭐
var 变量名 = /正则语法/;
使用栗子:
<script>
var str = 23;
var reg = /[0-9]{2}/; //至少出现两个数字
if(reg.test(str)) {
alert("条件成立");
}else {
alert("不成立");
}
</script>
输出: (语言描述)
运行后网页弹出框:条件成立;
如果要让你要匹配的字符串规定以什么开头或者以什么结尾,正则表达式可以这样写:
var str = "A35";
var reg = /A[0-9]{2}B/; //至少出现两个数字
上面就代表必须以A开头,B结尾;
5. 原生的js表单验证⭐
这里直接上代码,代码中请看注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
/*
* 正则规则制定:
* 1. 用户名满足4~14位的数字或者字母组成
* 2. 密码满足6~16位的数字或者字母组成
* 3. 确认密码和密码必须一致
* 4. 邮箱格式:数字或字母@数字或字母(.com/.cn/.com.cn...)
*/
function checkUserName() {
//第一步就是获取用户名的标签对象
var username = document.getElementById("username").value;
//获取后面的span标签对象
var userTip = document.getElementById("user_tip");
var reg = /^[a-zA-Z0-9]{4,14}$/;
if(reg.test(username)) {
//校验成功,则设置span标签的属性
userTip.innerHTML = "用户名格式正确".fontcolor("greenyellow");
return true;
}else {
userTip.innerHTML = "用户名格式错误".fontcolor("red");
return false;
}
}
function checkPwd() {
var password = document.getElementById("password").value;
//获取后面的span标签对象
var userTip = document.getElementById("pwd_tip");
var reg = /^[a-zA-Z0-9]{6,16}$/;
if(reg.test(password)) {
//校验成功,则设置span标签的属性
userTip.innerHTML = "密码格式正确".fontcolor("greenyellow");
return true;
}else {
userTip.innerHTML = "密码格式错误".fontcolor("red");
return false;
}
}
function checkRePwd() {
var password = document.getElementById("password").value;
var rePwd = document.getElementById("repwd").value;
var rePwdTip = document.getElementById("repwd_tip");
if(password == rePwd) {
rePwdTip.innerHTML = "两次输入的密码一致".fontcolor("greenyellow");
return true;
}else {
rePwdTip.innerHTML = "两次输入的密码不一致".fontcolor("red");
return false;
}
}
function checkEmail() {
var email = document.getElementById("email");
var emailTip = document.getElementById("email_tip");
var reg = /^[a-zA-Z0-9]aaa@qq.com[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/
if(reg.test(email)) {
emailTip.innerHTML = "邮箱格式正确".fontcolor("greenyellow");
return true;
}else {
emailTip.innerHTML = "邮箱格式错误".fontcolor("red");
return false;
}
}
//这个函数就是onsubmit事件的事件监听器,用来验证所有的;
function checkAll() {
if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()) {
return true;
}else {
return false;
}
}
</script>
<body>
<!--在from中有一个表单提交事件
onsubmit:整个表单中的信息如果都满足条件才能成功,否则不能提交,不能提交就是
点击提交按钮没有反应,不会跳转到后台;
⭐这个有返回值,所以不要忘了写return⭐
-->
<form action="backed.html" method="post" onsubmit="return checkAll()">
用户名:<input type="text" id="username" onblur="checkUserName()"/> <span id="user_tip"></span>
<br />
密 码:<input type="password" id="password" onblur="checkPwd()"/> <span id="pwd_tip"></span>
<br />
确认密码:<input type="password" id="repwd" onblur="checkRePwd()"/> <span id="repwd_tip"></span>
<br />
邮 箱:<input type="text" id="email" onblur="checkEmail()"/> <span id="email_tip"></span>
<br />
<input type="submit" value="注册" /> <input type="reset" value="重置" />
</form>
</body>
</html>
输出:
邮箱格式有误,所以点击提交没有反应;
点击重置,所有都会清空;
上一篇: Python3之百万并发实现方法
下一篇: C++ 类模版实现顺序表增删改查
推荐阅读
-
jQuery 源码解析(七) jQuery对象和DOM对象的互相转换
-
javascript中对Attr(dom中属性)的操作示例讲解
-
JavaScript学习和使用之函数声明和函数表达式的区别
-
C#.net编程创建Access文件和Excel文件的方法详解
-
node项目如何部署(简述vue和javascript的关系)
-
jQuery和DOM判断复选框是否被选中的方法解析
-
javascript中apply、call和bind的使用区别
-
JavaScript的函数式编程基础指南
-
如何使用PHP实现javascript的escape和unescape函数
-
javascript学习教程(免费学编程的网站)