天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
玉阶生白露，夜久侵罗袜。
却下水晶帘，玲珑望秋月。
——《玉阶怨》
文章目录
- 一、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，选中为true
let 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>
3.1.3 浏览器输出
使用浏览器打开，点以下访问属性，可以看到默认勾选的女已经换成了男
控制台输出如下，可以看到dom对象的参数输出
3.2 访问和修改内容
即获取或设置标签中的内容
两种方式：使用innerHTML、使用innerText
3.2.1 语法
访问用法如下，将内容解析为HTML
dom对象.innerHTML
或，将内容作为纯文本
dom对象.innerText
修改值用法如下
dom对象.innerHTML = "内容"
或
dom对象.innerText = "内容"
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>
// 2 访问内容
function getContent(){
var obj = document.getElementById("d11");
//获取指定标签的内容
//获取标签内的所有内容，包括标签、空格和换行符等
console.log(obj.innerHTML);
//只获取标签内的文本内容
console.log(obj.innerText);
//设置内容
//设置标签内的内容，使用innerTEXT只能设置文本内容
obj.innerText = "同居长干里，两小无嫌猜。";
console.log(obj.innerText);
//设置标签内的内容，使用innerHTML可设置标签等特殊内容
obj.innerHTML = "<h2>朝如青丝暮成雪</h2>";
console.log(obj.innerHTML);
}
</script>
</head>
<body>
<!-- 2 访问内容 -->
<br>
<hr>
<!-- 定义按钮，绑定事件，点击后触发事件，执行函数 -->
<input type="button" value="访问内容" onclick="getContent()">
<br><br><br>
<div id="d11">
高堂明镜悲白发
</div>
</body>
</html>
3.1.3 浏览器输出
使用浏览器打开，
点一下访问内容，内容修改为
控制台输出如下
3.3 访问和修改css
即获取或设置css样式
两种方式：使用style属性、使用className属性
3.3.1 语法
访问css用法如下
使用style属性用法
dom对象.style.样式属性
使用className属性用法
dom对象.className
注意：
如果css属性中又短横线-，需要去掉短横线，然后将其后的单词首字母改成大写
对象标签中的class，需要使用className访问
修改css用法如下
使用style属性用法
dom对象.style.样式属性 = "值"
使用className属性用法
dom对象.className = "值"
3.3.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>
// 3 访问CSS
function getStyle(){
var obj = document.getElementById("d22");
//获取CSS样式的宽度
console.log(obj.style.width);
//获取CSS样式的字体大小，这里需要注意，样式的键带短杠的需要将短杠去掉将短杠后的首字母大写
console.log(obj.style.fontSize);
//获取CSS样式的字体
console.log(obj.style.fontFamily);
//获取CSS样式的左上角的半角像素
console.log(obj.style.borderTopLeftRadius);
//设置CSS样式的值
obj.style.background = "lightgreen";
// console.log(obj.style.borderTopLeftRadius);
//另一种访问CSS的方式，className方式，需要配合CSS样式标签<style>
var obj2 = document.getElementById("d33");
//获取标签的class值
console.log(obj2.className);
//设置样式标签中class属性的值，设置后，调用该函数后样式即可被修改，这里需要注意，对象没有标签中的class，需要使用className访问
obj2.className = "c11";
//获取CSS样式的宽度
console.log(obj2.style.width);
}
</script>
<style>
/* 原始的样式 */
.ccc{
background: brown;
font-size: 30px;
}
/* 修改后的样式 在函数中调用修改样式 */
.c11{
width: 150px;
height: 20px;
background: red;
font-size: 10px;
}
</style>
</head>
<body>
<!-- 3 访问css -->
<br>
<hr>
<!-- 定义按钮，绑定事件，点击后触发事件，执行函数 -->
<input type="button" value="访问CSS" onclick="getStyle()">
<br><br><br>
<div id="d22" style="width: 1000px; height: 40px; background: lightblue; font-size: 30px; font-family: 'Courier New', Courier
