JavaScript（四）BOM、DOM、表单、MD5加密、表单绑定

JavaScript（四）BOM、DOM、表单、MD5加密、表单绑定
- 操作BOM对象（重点）
  - 浏览器介绍
  - window对象
  - Navigator
  - screen
  - location(重要)
  - document
  - history
- 操作DOM对象（重点）
  - 获得DOM节点
  - 更新DOM节点
    - 操作文本
    - 操作css
    - 删除节点
    - 插入节点
    - 创建一个新的标签
    - insert插入
- 操作表单
  - 获得将要提交的信息
  - 表单提交验证
- MD5加密
  - 加密方式一(按钮绑定)：
  - 加密方式二(隐藏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="史小鹏"

//获取具体的文档树节点


    s1
    s2
    s3

可以获取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方法可以获得这个子节点

原生代码


    标题1
    p1
    p2

更新DOM节点

操作文本

id1.innerText='456'修改文本的值

id1.innerHTML='123'可以解析HTML文本标签

操作css

id1.style.color='yellow';//属性使用 字符串 包裹
id1.style.fontSize='20px';
id1.style.padding='2em';

删除节点

步骤：先获取父节点，再通过父节点删除自己


    标题1
    p1
    p2

注意：删除多个节点的时候，children属性是在时刻变化的，要注意

插入节点

通过追加操作添加节点

JavaScript

    JavaSE
    JavaEE
    java

创建一个新的标签

创建p标签


    java

创建script标签

JavaScript

    java

修改背景颜色，将一个style标签放在head后面

insert插入

操作表单

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
...

表单的目的：提交信息

获得将要提交的信息

value和checked

表单提交验证

required表示输入不能为空

MD5加密

导入MD5工具类：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

加密方式一(按钮绑定)：

加密方式二(隐藏md5)（建议）：

通过type="hidden"，让md5的代码不显示在网页上，保证安全
type="hidden"代表隐藏域
隐藏域在页面中对于用户是不可见的，在表单插入中隐藏域的目的在于收集和发送信息，以利于被处理表单的程序所使用
注：隐藏只是在网页页面上不显示输入框，但是虽然隐藏了，还是具有form传值功能。一般用来传值，而不必让用户看到。
提交的是name属性，所以可以在输入框输入，经过md5之后给隐藏域，最后由隐藏域的值被提交

加密方式三(表单绑定)：

通过onsubmit绑定一个提交检测的函数
将结果返回true false可以校验表单内容判断是否需要提交
例：下面的return aaa()返回判断

JavaScript

JavaScript（四）BOM、DOM、表单、MD5加密、表单绑定

JavaScript（四）BOM、DOM、表单、MD5加密、表单绑定

操作BOM对象（重点）

浏览器介绍

window对象

Navigator

screen

location(重要)

document

history

操作DOM对象（重点）

获得DOM节点

标题1

更新DOM节点

操作文本

操作css

删除节点

标题1

插入节点

创建一个新的标签

insert插入

标题1

操作表单

获得将要提交的信息

表单提交验证

MD5加密

加密方式一(按钮绑定)：

加密方式二(隐藏md5)（建议）：

加密方式三(表单绑定)：

相关