JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则表达式

绝地灬酷狼 2023-10-07 19:56 5阅读 0赞

#### 文章目录 ####

*  JavaScript对象
 *   *  Array
     *   *  Array对象属性
         *  Array对象方法
     *  String
     *  自定义对象
 *  BOM
 *   *  Window
     *   *  History
         *  Location
 *  DOM
 *   *   *  获取 Element
 *  事件监听
 *   *  事件绑定
     *  常见事件
     *  案例：表单验证
     *  正则表达式

## JavaScript对象 ##

### Array ###

JavaScript Array对象用于定义数组

*  定义  
    ![在这里插入图片描述][9a01dbc1a57745cdbdc911588837ab48.png]
 *  访问  
    ![在这里插入图片描述][8a96ec8d69534f10b3c437484cf0200b.png]  
    `注意`：JS数组类似于Java集合，长度类型都可变

#### Array对象属性 ####

![在这里插入图片描述][fb9d8ac8aee74bc697f087fb6e96322a.png]

#### Array对象方法 ####

![在这里插入图片描述][ef93f86146684fa5be4019ed64949b60.png]

### String ###

*  定义  
    ![在这里插入图片描述][cdeba8f45c944fb386446a4a7e5e66bc.png]
 *  属性  
    ![在这里插入图片描述][2cc68b35be80489abc4388d353afcdcd.png]
 *  方法  
    ![在这里插入图片描述][152fb89195af40fabca295acb82b9ef0.png]

### 自定义对象 ###

*  格式  
    ![在这里插入图片描述][f3a618a8f6b7407a953966d3f417916a.png]
 *  示例  
    ![在这里插入图片描述][cc721edffd02458a8a8ff93cf8b4b87a.png]

## BOM ##

*  Browser Object Model 浏览器对象模型
 *  JavaScript 将浏览器的各个组成部分封装为对象
 *  组成
    
     *  Window:浏览器窗口模型
     *  Navigator:浏览器对象
     *  Screen:屏幕对象
     *  History:历史记录对象
     *  Location:地址栏对象
    
    ### Window ###
 *  Window:浏览器窗口对象
 *  获取：直接使用 window,其中window.可省略  
    ![在这里插入图片描述][514874722c18481ba1c850ca59680322.png]
 *  属性：获取其他 BOM对象  
    ![在这里插入图片描述][236b64ee94fc4ce195c1cf62f69034d2.png]
 *  方法  
    ![在这里插入图片描述][f8e3af16b6fb4b64812882011f84e072.png]

#### History ####

*  History:历史记录
 *  获取：使用 window.history获取，其中window.可以省略  
    ![在这里插入图片描述][fc8751c506e048ee9f0e601eddcb8f0f.png]
 *  方法  
    ![在这里插入图片描述][c5c437077b0242bbafbe36f4f3091125.png]

#### Location ####

*  Location:地址栏对象
 *  获取：使用 window.location获取，其中 window.可以省略  
    ![在这里插入图片描述][dd0f7855c7014ebba0957e007b7b1d79.png]
 *  属性  
    ![在这里插入图片描述][b40370438e0542c2b37878e7baf1da7c.png]

## DOM ##

*  Document Object Model 文档对象模型
 *  将标记语言的各个组成部分封装成对象
    
     *  Document:整个文档对象
     *  Element:元素对象
     *  Attribute:属性对象
     *  Text:文本对象
     *  Comment:注释对象  
        ![在这里插入图片描述][e2e239fbeaf74a1088e9826aa31602f1.png]  
        ![在这里插入图片描述][867d8926e288454b9bc1359b1b48543c.png]
 *  JavaScript 通过DOM,就能够对 HTML进行操作了。
 *  改变HTML元素的内容
 *  改变HTML元素的样式（css）
 *  对HTML DOM事件作出反应
 *  添加删改HTML元素
 *  DOM是W3C(万维网联盟)的标准
 *  DOM定义了访问HTML和XML文档的标准
 *  W3CDOM 标准被分为3个不同的部分：  
    1.核心DOM:针对任何结构化文档的标准模型
 *  Document:整个文档对象
 *  Element:元素对象
 *  Attribute:属性对象
 *  Text:文本对象
 *  Comment:注释对象  
    2.XML DOM:针对 XML 文档的标准模型  
    3.HTML DOM:针对 HTML文档的标准模型
 *  Image:< img >
 *  Button:< input type = ‘button’ >

#### 获取 Element ####

*  Element:元素对象
 *  获取：使用Document对象的方法来获取  
    1 . getElementById:根据 id 属性值获取，返回一个 Element 对象  
    2.getElementByTagName:根据标签名称获取，返回Element对象数组  
    3.getElementByName:根据name属性值获取，返回Element对象数组  
    4.getElementByClassName:根据class属性值获取，返回Element对象数组
 *  Element:元素对象
 *  使用：查阅文档

## 事件监听 ##

*  事件:HTML事件是发生在HTML元素上的“事情”。比如：
 *  按钮被点击
 *  鼠标移动到元素之上
 *  按下键盘按键
 *  事件监听:JavaScript 可以在事件被侦测到时执行代码

### 事件绑定 ###

*  事件绑定有两种方式：
    
     *  方式一：通过 HTML标签中的事件属性进行绑定  
        ![在这里插入图片描述][ab538e962dd8488b8c1ddedbb2acf45c.png]
     *  方式二:通过 DOM元素属性绑定  
        ![在这里插入图片描述][bcf0eb5452c340f18ce8c7c0b76d5950.png]
    
    ### 常见事件 ###
    
    ![在这里插入图片描述][87138a10d97a4c7c9591effe485d3dac.png]
 *  Event代表事件对象

### 案例：表单验证 ###

![在这里插入图片描述][db43a024518947d08e638d507b79f1b1.png]  
1.当输入框失去焦点时，验证输入内容是否符合要求

*  获取表单输入框  
    ![在这里插入图片描述][c3be9f649d254b14b28b9d83ec3c6c0a.png]
 *  绑定 onblur事件  
    ![在这里插入图片描述][aac7c8e2d75f40259eb8e50a3b89b46b.png]
 *  获取输入内容  
    ![在这里插入图片描述][fb3462c94fde499d875845c98a071cd6.png]
 *  判断是否符合规则  
    ![在这里插入图片描述][4124890c347040aa827e68565cbe930a.png]
 *  如果不符合规则，则显示错误提示信息  
    2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合则阻止表单提交
 *  获取表单对象  
    ![在这里插入图片描述][0d55012da8c44f528a353e2dbdf6218b.png]
 *  为表单对象绑定 onsubmit  
    ![在这里插入图片描述][e034dfd3a79548e8b93968c4f10e7a60.png]
 *  判断所有输入框是否都符合要求，如果符合则返回 true,如果有一项 不符合，则返回 false

### 正则表达式 ###

*  概念：正则表达式定义了字符串组成的规则
 *  定义：  
    1.直接量:注意不要加引号  
    ![在这里插入图片描述][69247ed83af44b6db1689e5ab4da54b6.png]  
    2.创建 RegExp 对象  
    ![在这里插入图片描述][95c0d73bad2540d19741ee62e20f0f66.png]
 *  方法：
    
     *  test(str):判断指定字符串是否符合规则，返回true或 flase
 *  语法：
    
     *  ^:表示开始
     *  $:表示结束
     *  \[\]:代表某个范围内的单个字符，比如：\[0-9\]单个数字字符
     *  .:代表任意单个字符， 除了换行和行结束符
     *  \\w:代表单词字符：字母、数字、下划线（\_）,相当于\[A-Za-z0-9\]
     *  \\d:代表数字字符：相当于\[0-9\]
     *  量词：  
        \+：至少一个  
        ![在这里插入图片描述][3f8603056663439a8daf8104bfbae040.png]  
        \*：零个或多个  
        ？：零个或一个  
        \{x\}:x个  
        \{m,\}至少m个  
        \{m,n\}:至少 m 个，最多 n个

[9a01dbc1a57745cdbdc911588837ab48.png]: https://img-blog.csdnimg.cn/9a01dbc1a57745cdbdc911588837ab48.png
[8a96ec8d69534f10b3c437484cf0200b.png]: https://img-blog.csdnimg.cn/8a96ec8d69534f10b3c437484cf0200b.png
[fb9d8ac8aee74bc697f087fb6e96322a.png]: https://img-blog.csdnimg.cn/fb9d8ac8aee74bc697f087fb6e96322a.png
[ef93f86146684fa5be4019ed64949b60.png]: https://img-blog.csdnimg.cn/ef93f86146684fa5be4019ed64949b60.png
[cdeba8f45c944fb386446a4a7e5e66bc.png]: https://img-blog.csdnimg.cn/cdeba8f45c944fb386446a4a7e5e66bc.png
[2cc68b35be80489abc4388d353afcdcd.png]: https://img-blog.csdnimg.cn/2cc68b35be80489abc4388d353afcdcd.png
[152fb89195af40fabca295acb82b9ef0.png]: https://img-blog.csdnimg.cn/152fb89195af40fabca295acb82b9ef0.png
[f3a618a8f6b7407a953966d3f417916a.png]: https://img-blog.csdnimg.cn/f3a618a8f6b7407a953966d3f417916a.png
[cc721edffd02458a8a8ff93cf8b4b87a.png]: https://img-blog.csdnimg.cn/cc721edffd02458a8a8ff93cf8b4b87a.png
[514874722c18481ba1c850ca59680322.png]: https://img-blog.csdnimg.cn/514874722c18481ba1c850ca59680322.png
[236b64ee94fc4ce195c1cf62f69034d2.png]: https://img-blog.csdnimg.cn/236b64ee94fc4ce195c1cf62f69034d2.png
[f8e3af16b6fb4b64812882011f84e072.png]: https://img-blog.csdnimg.cn/f8e3af16b6fb4b64812882011f84e072.png
[fc8751c506e048ee9f0e601eddcb8f0f.png]: https://img-blog.csdnimg.cn/fc8751c506e048ee9f0e601eddcb8f0f.png
[c5c437077b0242bbafbe36f4f3091125.png]: https://img-blog.csdnimg.cn/c5c437077b0242bbafbe36f4f3091125.png
[dd0f7855c7014ebba0957e007b7b1d79.png]: https://img-blog.csdnimg.cn/dd0f7855c7014ebba0957e007b7b1d79.png
[b40370438e0542c2b37878e7baf1da7c.png]: https://img-blog.csdnimg.cn/b40370438e0542c2b37878e7baf1da7c.png
[e2e239fbeaf74a1088e9826aa31602f1.png]: https://img-blog.csdnimg.cn/e2e239fbeaf74a1088e9826aa31602f1.png
[867d8926e288454b9bc1359b1b48543c.png]: https://img-blog.csdnimg.cn/867d8926e288454b9bc1359b1b48543c.png
[ab538e962dd8488b8c1ddedbb2acf45c.png]: https://img-blog.csdnimg.cn/ab538e962dd8488b8c1ddedbb2acf45c.png
[bcf0eb5452c340f18ce8c7c0b76d5950.png]: https://img-blog.csdnimg.cn/bcf0eb5452c340f18ce8c7c0b76d5950.png
[87138a10d97a4c7c9591effe485d3dac.png]: https://img-blog.csdnimg.cn/87138a10d97a4c7c9591effe485d3dac.png
[db43a024518947d08e638d507b79f1b1.png]: https://img-blog.csdnimg.cn/db43a024518947d08e638d507b79f1b1.png
[c3be9f649d254b14b28b9d83ec3c6c0a.png]: https://img-blog.csdnimg.cn/c3be9f649d254b14b28b9d83ec3c6c0a.png
[aac7c8e2d75f40259eb8e50a3b89b46b.png]: https://img-blog.csdnimg.cn/aac7c8e2d75f40259eb8e50a3b89b46b.png
[fb3462c94fde499d875845c98a071cd6.png]: https://img-blog.csdnimg.cn/fb3462c94fde499d875845c98a071cd6.png
[4124890c347040aa827e68565cbe930a.png]: https://img-blog.csdnimg.cn/4124890c347040aa827e68565cbe930a.png
[0d55012da8c44f528a353e2dbdf6218b.png]: https://img-blog.csdnimg.cn/0d55012da8c44f528a353e2dbdf6218b.png
[e034dfd3a79548e8b93968c4f10e7a60.png]: https://img-blog.csdnimg.cn/e034dfd3a79548e8b93968c4f10e7a60.png
[69247ed83af44b6db1689e5ab4da54b6.png]: https://img-blog.csdnimg.cn/69247ed83af44b6db1689e5ab4da54b6.png
[95c0d73bad2540d19741ee62e20f0f66.png]: https://img-blog.csdnimg.cn/95c0d73bad2540d19741ee62e20f0f66.png
[3f8603056663439a8daf8104bfbae040.png]: https://img-blog.csdnimg.cn/3f8603056663439a8daf8104bfbae040.png