JS（JavaScript）入门指南（DOM、事件处理、BOM、数据校验）

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

玉阶生白露，夜久侵罗袜。
却下水晶帘，玲珑望秋月。
——《玉阶怨》

文章目录

一、DOM操作
- 1. DOM介绍
- 2. 查询操作
- - 2.1 查询方法
  - 2.2 查询示例
  - - 2.2.1 根据id获取dom
    - - 2.2.1.1 示例
      - 2.2.1.2 结果
    - 2.2.2 根据tag获取dom
    - - 2.2.2.1 示例
      - 2.2.2.2 结果
    - 2.2.3 根据css样式获取dom
    - - 2.2.3.1 示例
      - 2.2.3.2 结果
    - 2.2.4 根据已有节点获取其他节点dom
    - - 2.2.4.1 示例
      - 2.2.4.2 结果
  - 2.3 查询示例代码汇总
- 3. 访问和修改操作
- - 3.1 访问和修改属性
  - - 3.1.1 语法
    - 3.1.2 示例代码
    - 3.1.3 浏览器输出
  - 3.2 访问和修改内容
  - - 3.2.1 语法
    - 3.1.2 示例代码
    - 3.1.3 浏览器输出
  - 3.3 访问和修改css
  - - 3.3.1 语法
    - 3.3.2 示例代码
    - 3.3.3 浏览器输出
- 4. 添加替换操作
- - 4.1 示例代码
  - 4.2 效果展示
  - - 4.2.1 添加
    - 4.2.2 指定位置添加
    - 4.2.3 替换
- 5. 删除操作
- - 5.1 示例代码
  - 5.2 效果演示
  - - 5.2.1 remove方法删除
    - 5.2.2 removeChild方法删除
- 6. 趣味案例
- - 6.1 效果图
  - 6.2 搜索引擎的参数获取
  - - 6.2.1 百度的参数获取
    - 6.2.2 搜狗的参数获取
    - 6.2.3 360的参数获取
  - 6.3 示例代码
  - 6.4 效果演示
二、事件处理
- 1. 事件简介
- - 1.1 事件的定义
  - 1.2 事件源
  - 1.3 事件对象
  - 1.4 事件监听
- 2. 事件的绑定
- - 2.1 静态绑定
  - 2.2 动态绑定
  - 2.3 注意事项
- 3. 常用事件
- - 3.1 鼠标事件
  - - 3.1.1 事件列举
    - 3.1.2 示例代码
    - 3.1.2 页面展示
  - 3.2 键盘事件
  - - 3.2.1 事件列举
    - 3.2.2 示例代码
    - 3.2.3 页面效果
  - 3.3 表单事件
  - - 3.3.1 事件列举
    - 3.3.2 示例代码
    - 3.3.3 页面效果
- 4. 事件操作
- - 4.1 事件冒泡
  - - 4.1.1 定义
    - 4.1.2 特点
    - 4.1.3 语法
    - 4.1.4 示例代码
    - 4.1.5 页面效果
  - 4.2 事件默认行为
  - - 4.2.1 定义
    - 4.2.2 语法
    - 4.2.3 示例代码
    - 4.2.4 页面效果
- 5. 下拉列表
- - 5.1 Select
  - - 5.1.1 属性
    - 5.1.2 方法
    - 5.1.3 事件
  - 5.2 Option
  - - 5.2.1 属性
    - 5.2.2 构造函数
- 6. 事件处理趣味实例
- - 6.1 创建表格
  - - 6.1.1 示例代码
    - 6.1.2 页面效果
  - 6.2 创建表单
  - - 6.2.1 示例代码
    - 6.2.2 页面效果
  - 6.3 添加样式
  - - 6.3.1 示例代码
    - 6.3.2 页面效果
  - 6.4 表格中的事件绑定
  - - 6.4.1 示例代码
    - 6.4.2 页面效果
  - 6.5 表单中的事件绑定
  - - 6.5.1 示例代码
    - 6.5.2 页面效果
  - 6.6 复选框功能实现
  - - 6.6.1 示例代码
    - 6.6.2 页面效果
  - 6.7 示例代码下载
三、BOM操作
四、数据校验
五、示例代码下载

JS（JavaScript）入门指南
JS（JavaScript）学习专栏

一、DOM操作

1. DOM介绍

DOM全称为dom document object model 文档对象模型

dom树
浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树

html文档和dom树是一一对应的
dom树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用dom进行操作
dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档

2. 查询操作

查询就是获取dom对象

2.1 查询方法

查询的方法和含义如下表

方法或属性	含义
document.getElementById(“id”)	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name”)	根据name属性查询，并返回所有匹配的节点集合
document.getElementsByTagName(“tagName”)	根据标签名来查询，返回所有匹配的节点集合
documnet.querySelector(“selector”)	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“selector”)	根据css选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previous Sibing属性	查询当前节点的上一个节点
nextSibing属性	查询当前节点的下一个节点
firstChild属性	查询当前节点的第一个子节点
lastChild属性	查询当前节点的最后一个子节点

2.2 查询示例

示例代码共分为以下几种：根据id获取dom对象、根据标签tag获取dom对象、根据css样式获取dom对象、根据已有节点获取其他节点dom对象

2.2.1 根据id获取dom

根据id获取dom对象方法：document.getElementById(“id”)

2.2.1.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据id获取dom对象");//根据id获取dom对象，返回单个值var objDiv = document.getElementById("d1");//获取对象的类型console.log(typeof objDiv);//打印对象console.log(objDiv);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><div id="d1" class="c">hello!</div></body>
</html>

2.2.1.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.2.2 根据tag获取dom

根据标签tag获取dom对象，示例如下

2.2.2.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据name获取dom对象");//根据name获取dom对象，返回数组var objDivs = document.getElementsByName("hobby");//获取对象的类型console.log(typeof objDivs);//打印对象console.log(objDivs);//遍历数组对象for(var index in objDivs){console.log(objDivs[index])}}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()">hobbies:<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="kingplay" name="hobby">打王者name:       <input type="text" name="username"></body>
</html>

2.2.2.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述
浏览器控制台输出如下

2.2.3 根据css样式获取dom

通过css样式style获取dom对象

2.2.3.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据css选择器获取单个dom对象");//根据css选择器获取单个dom对象var objCss = document.querySelector("#d1");console.log(objCss);//根据css选择器，使用标签获取对象，只会取第一个input标签的对象var objCss2 = document.querySelector("input");console.log(objCss2);//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象var objCss3 = document.querySelector(".c");console.log(objCss3);//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss4 = document.querySelector("p.c");console.log(objCss4);//根据css选择器获取多个dom对象//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss5 = document.querySelectorAll(".c");console.log(objCss5);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><div id="d1" class="c">hello!</div><div id="d2" class="c">world!</div><p class="c">test</p></body>
</html>

2.2.3.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.2.4 根据已有节点获取其他节点dom

根据已有节点获取其他节点的dom对象，示例如下

2.2.4.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);//根据已有节点获取其他节点var objId = document.getElementById("id-du");//获取li标签的父类标签的对象console.log(objId.parentNode);//获取指定标签的上一个同级标签console.log(objId.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling);//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值//如果有text类型的值，则需要取两次才能取到//获取指定标签的上一个同级标签console.log(objId.previousSibling.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling.nextSibling);//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容console.log(objId.parentNode.firstChild);//获取当前节点下子节点的最后一个节点console.log(objId.parentNode.lastChild);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><ul>a<li id="id-li">李白</li><li id="id-du">杜甫</li><li>王维</li><li>杜牧</li>b</ul></body>
</html>

2.2.4.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.3 查询示例代码汇总

以上方法的示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据id获取dom对象");//根据id获取dom对象，返回单个值var objDiv = document.getElementById("d1");//获取对象的类型console.log(typeof objDiv);//打印对象console.log(objDiv);console.log("根据name获取dom对象");//根据name获取dom对象，返回数组var objDivs = document.getElementsByName("hobby");//获取对象的类型console.log(typeof objDivs);//打印对象console.log(objDivs);//遍历数组对象for(var index in objDivs){console.log(objDivs[index])}console.log("根据tag获取dom对象");//根据tag标签名获取dom对象var objIput = document.getElementsByTagName("input");for(var index in objIput){console.log(objIput[index]);}console.log("根据css选择器获取单个dom对象");//根据css选择器获取单个dom对象var objCss = document.querySelector("#d1");console.log(objCss);//根据css选择器，使用标签获取对象，只会取第一个input标签的对象var objCss2 = document.querySelector("input");console.log(objCss2);//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象var objCss3 = document.querySelector(".c");console.log(objCss3);//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss4 = document.querySelector("p.c");console.log(objCss4);//根据css选择器获取多个dom对象//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss5 = document.querySelectorAll(".c");console.log(objCss5);//根据已有节点获取其他节点var objId = document.getElementById("id-du");//获取li标签的父类标签的对象console.log(objId.parentNode);//获取指定标签的上一个同级标签console.log(objId.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling);//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值//如果有text类型的值，则需要取两次才能取到//获取指定标签的上一个同级标签console.log(objId.previousSibling.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling.nextSibling);//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容console.log(objId.parentNode.firstChild);//获取当前节点下子节点的最后一个节点console.log(objId.parentNode.lastChild);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><div id="d1" class="c">hello!</div><div id="d2" class="c">world!</div><p class="c">test</p>hobbies:<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="kingplay" name="hobby">打王者name:       <input type="text" name="username"><ul>a<li id="id-li">李白</li><li id="id-du">杜甫</li><li>王维</li><li>杜牧</li>b</ul></body>
</html>

使用浏览器打开，点击获取页面中的元素
在这里插入图片描述

控制台输出如下
在这里插入图片描述

3. 访问和修改操作

访问和修改操作包括：访问和修改属性、访问和修改内容、访问和修改样式

3.1 访问和修改属性

即获取或者设置dom对象的属性
dom对象的属性和html标签的属性几乎是一样的，一般情况下dom对象都会存在一个与对应html标签同名的属性

3.1.1 语法

访问用法如下

dom对象.属性

修改用法如下

dom对象.属性=值

3.1.2 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-访问和修改</title><script>// 1 访问属性function getProperty(){let obj = document.getElementById("baidu");//获取超链接的href属性值console.log(obj.href);//获取超链接的target属性值console.log(obj.target);//获取指定对象的内容let objs = document.getElementById("username");console.log(objs.value);//获取指定对象的是否选中值，这里的checked返回的是false或ture，选中为truelet obj3 = document.getElementById("male");console.log(obj3.checked);//设置属性值//将超链接百度的地址修改为别的，设置后刷新页面，点访问属性然后再点链接即可跳转到新的网址obj.href = "https://blog.csdn.net/mo_sss";//将跳转规则修改为当前页面跳转obj.target = "_self";//修改性别单选值的默认选项，将男性该位默认obj3.checked = "true";}</script></head>
<body><!-- 1 访问属性 --><br><br><br><!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --><input type="button" value="访问属性" onclick="getProperty()"><br><!-- <hr> --><br><a href="https://www.baidu.com" target="_blank" id="baidu">baidu</a><br><br><br>username: <input type="text" name="username" id="username">sex: <input type="radio" name="sex" value="male" id="male">男<input type="radio" name="sex" value="female" id="female" checked>女<br><br><br></body>
</html>