JavaScript（四）BOM、DOM、表单、MD5加密、表单绑定
JavaScript（四）BOM、DOM、表单、MD5加密、表单绑定
目录
操作BOM对象（重点）
浏览器介绍
js和浏览器关系
- js诞生是为了能够让它在浏览器中运行
BOM:浏览器对象模型
- IE 6~11
- Chrome
- Safar
- FireFox
- Opera
三方
- 360浏览器
- QQ浏览器
window对象
window代表浏览器窗口
//浏览器窗口
window.innerHeight;//内部高度
window.innerWidth;//内部宽度
window.outerHeight;//外部高度
window.outerWidth;//外部宽度
Navigator
Navigator封装了浏览器的信息
一般不用Navigator，因为会被人人为修改
screen
代表计算机的屏幕
//屏幕尺寸
screen.width;//屏幕宽度
screen.height;//屏幕高度
location(重要)
location代表当前页面的url信息
//location
host: "www.baidu.com"//主机
href: "https://www.baidu.com/"//当前指向的位置
protocol: "https:"//协议
reload: ƒ reload()//重新加载（刷新网页）
//设置新的地址
location.assign('https://www.cnblogs.com/sxw0514/')
document
document代表当前的页面，HTML DOM文档树
//显示当前页面的标题
document.title
//修改当前页面的标题
document.title="史小鹏"
//获取具体的文档树节点
<body>
<dl id="x1">
<dt>s1</dt>
<dt>s2</dt>
<dt>s3</dt>
</dl>
<script>
var dl=document.getElementById("x1");
</script>
</body>
可以获取cookie
通过document.cookie获取
document.cookie
'BIDUPSID=5C82B1D014AEB6B8A8EE4DD04E3C1ABE; PSTM=1611746978; BAIDUID=8C27746444D617170D7EB3EA33BB54D8:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598;'
服务器端可以设置cookie:httpOnly来保障安全
history
history代表浏览器的历史记录
history.back()//后退
history.forward()//前进
操作DOM对象（重点）
DOM:文档对象模型
- 整个浏览器网页就是一个DOM树形结构（例如html->head,html->body,body->div,div->a,div->ul）
- 更新：更新Dom节点
- 遍历DOM节点：得到DOM节点
- 删除节点：删除一个DOM节点
- 添加：添加一个新的节点
获得DOM节点
-
要操作一个DOM节点，就必须要先获得这个DOM节点
-
通过children方法可以获得这个子节点
原生代码
<div id="father"> <h1>标题1</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> //对应css选择器 var h1=document.getElementsByTagName('h1'); var p1=document.getElementById("p1"); var p2=document.getElementsByClassName("p2"); var father=document.getElementById("father"); console.log(father.children);//通过children获取子节点 </script>
更新DOM节点
操作文本
id1.innerText='456'修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签
操作css
id1.style.color='yellow';//属性使用 字符串 包裹
id1.style.fontSize='20px';
id1.style.padding='2em';
删除节点
-
步骤：先获取父节点，再通过父节点删除自己
<div id="father"> <h1>标题1</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> //对应css选择器 var h1=document.getElementsByTagName('h1'); var self=document.getElementById("p1"); var father=p1.parentElement;//通过parentElement找到父节点 father.removeChild(self);//删除字节点 </script>注意：删除多个节点的时候，children属性是在时刻变化的，要注意
插入节点
-
通过追加操作添加节点
<p>JavaScript</p> <div> <p id="se">JavaSE</p> <p id="ee">JavaEE</p> <p id="me">java</p> </div> <script> var js = document.getElementById('js'); var list = document.getElementById('list'); list.appendChild(js);//追加到后面 </script>
创建一个新的标签
-
创建p标签
-
<div> <p id="list">java</p> </div> <script> var js = document.getElementById('js');//已存在的节点 var list = document.getElementById('list'); var x1=document.createElement('p')//创建一个p标签 x1.id='n1';//id x1.innerText="hello";//内容 list.appendChild(x1); </script> -
创建script标签
-
<p>JavaScript</p> <div> <p id="list">java</p> </div> <script> var js = document.getElementById('js');//已存在的节点 var list = document.getElementById('list'); var x1=document.createElement('p')//创建一个p标签 x1.id='n1';//id x1.innerText="hello";//内容 list.appendChild(x1); var my1=document.createElement('script');//创建script标签 my1.setAttribute('type','text/javascript');//也就是type='text/javascript',相当于x1.setAttribute('id','n1') list.appendChild(my1); </script> -
修改背景颜色，将一个style标签放在head后面
-
<script> //修改背景 var m1=document.createElement('style');//创建一个空的style标签 m1.setAttribute('type','text/css'); m1.innerHTML='body{background-color:blue}';//设置背景为蓝色 document.getElementsByTagName('head')[0].appendChild(m1);//将m1放在head后面 </script>
insert插入
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
<script>
//对应css选择器
var n1=document.getElementById("p1");
var f=document.getElementById("father");
var n3=document.getElementById("p3");
f.insertBefore(n3,n1);//n1放到n3后面
</script>
操作表单
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- ...
表单的目的：提交信息
获得将要提交的信息
value和checked
<form action="post">
<p>
<span>用户名：</span>
<input type="text" id="username">
</p>
<p>
<!--多选框的值，就是定义好的value-->
<span>性别：</span>
<input type="radio" name="sex" id="boy">男
<input type="radio" name="sex" id="girl">女
</p>
</form>
<script>
var n1=document.getElementById("username");
var boy1=document.getElementById("boy");
//得到输入框的值
n1.value;
//修改输入框的值，打开浏览器默认里面写的123，但自己可以修改
n1.value='123';
//对于单选框和多选框，value只能取得当前值
boy1.checked;//查看返回结果，没被选中返回false，被选中则返回true
boy1.checked=true;//修改选中的值，设置boy为true，打开浏览器默认先选中男
</script>
表单提交验证
required表示输入不能为空
<form action="#" method="post">
<p>
<span>用户名：</span>
<!--required表示输入不能为空-->
<input type="text" id="username" required>
</p>
<p>
<span>密 码：</span>
<!--required表示输入不能为空-->
<input type="password" id="password" required>
</p>
<!--绑定事件onclick，被点击-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var uname =document.getElementById("username");
var pwd=document.getElementById("password");
console.log(uname.value);
console.log(pwd.value);
}
</script>
MD5加密
导入MD5工具类：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
加密方式一(按钮绑定)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
<!--导入MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名：</span>
<!--required表示输入不能为空-->
<input type="text" id="username" required>
</p>
<p>
<span>密 码：</span>
<!--required表示输入不能为空-->
<input type="password" id="password" required>
</p>
<!--绑定事件onclick，被点击-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var uname =document.getElementById("username");
var pwd=document.getElementById("password");
//MD5算法
pwd.value=md5(pwd.value);
console.log(pwd.value);
}
</script>
</body>
</html>
加密方式二(隐藏md5)（建议）：
- 通过type="hidden"，让md5的代码不显示在网页上，保证安全
- type="hidden"代表隐藏域
- 隐藏域在页面中对于用户是不可见的，在表单插入中隐藏域的目的在于收集和发送信息，以利于被处理表单的程序所使用
注：隐藏只是在网页页面上不显示输入框，但是虽然隐藏了，还是具有form传值功能。一般用来传值，而不必让用户看到。 - 提交的是name属性，所以可以在输入框输入，经过md5之后给隐藏域，最后由隐藏域的值被提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
<!--导入MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定-->
<form action="#" method="post" onsubmit="aaa()">
<p>
<!--有name属性才能抓到值-->
<span>用户名：</span>
<!--required表示输入不能为空-->
<input type="text" id="username" required name="username">
</p>
<p>
<span>密 码：</span>
<!--required表示输入不能为空-->
<input type="password" id="input-password" required>
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件onclick，被点击-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
var uname =document.getElementById("username");
var pwd=document.getElementById("input-password");
var md5pwd=document.getElementById("md5-password");
//MD5算法
md5pwd.value=md5(pwd.value);
return false;
}
</script>
</body>
</html>
加密方式三(表单绑定)：
-
通过onsubmit绑定一个提交检测的函数
-
将结果返回true false可以校验表单内容判断是否需要提交
-
例：下面的return aaa()返回判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
<!--导入MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定-->
<!--返回aaa()的值，如果是false则不提交，如果是true则提交-->
<form action="#" method="post" onsubmit="return aaa()">
<p>
<!--有name属性才能抓到值-->
<span>用户名：</span>
<!--required表示输入不能为空-->
<input type="text" id="username" required name="username">
</p>
<p>
<span>密 码：</span>
<!--required表示输入不能为空-->
<input type="password" id="input-password" required>
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件onclick，被点击-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
var uname =document.getElementById("username");
var pwd=document.getElementById("input-password");
var md5pwd=document.getElementById("md5-password");
//MD5算法
md5pwd.value=md5(pwd.value);
//true是提交，false是不提交
return true;
}
</script>
</body>
</html>
