From 7834e6eeb0b521d85aa889b8f136b83206bc2046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Wed, 16 Nov 2022 05:31:56 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=E4=B8=83=E9=87=8C=E9=A6=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈枫 <1687425871@qq.com>
---
 ...345\236\213DOM\347\254\224\350\256\260.md" | 432 ++++++++++++++++++
 ...2022-11-15-DOM\347\254\224\350\256\260.md" | 340 ++++++++++++++
 2 files changed, 772 insertions(+)
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-08-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213DOM\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-15-DOM\347\254\224\350\256\260.md"

diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-08-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213DOM\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-08-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213DOM\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..5fbe476
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-08-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213DOM\347\254\224\350\256\260.md"
@@ -0,0 +1,432 @@
+# 浏览器对象模型(BoM)
+
+## (一)浏览器
+
+由于JavaScript的出现就是为了能在浏览器中运行，所以，浏览器自然是JavaScript开发者必须要关注的。
+
+目前主流的浏览器分这么几种：
+
+1.IE 6~11：国内用得最多的IE浏览器，历来对W3C标准支持差。从IE10开始支持ES6标准；
+
+2.Chrome：Google出品的基于Webkit内核浏览器，内置了非常强悍的JavaScript引擎——V8。由于Chrome一经安装就时刻保持自升级，所以不用管它的版本，最新版早就支持ES6了；
+
+3.Safari：Apple的Mac系统自带的基于Webkit内核的浏览器，从OS X 10.7 Lion自带的6.1版本开始支持ES6，目前最新的OS X 10.11 El Capitan自带的Safari版本是9.x，早已支持ES6；
+
+4.Firefox：Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey。早期的Firefox按版本发布，后来终于聪明地学习Chrome的做法进行自升级，时刻保持最新；
+
+移动设备上目前iOS和Android两大阵营分别主要使用Apple的Safari和Google的Chrome，由于两者都是Webkit核心，结果HTML5首先在手机上全面普及（桌面绝对是Microsoft拖了后腿），对JavaScript的标准支持也很好，最新版本均支持ES6。
+
+其他浏览器如Opera等由于市场份额太小就被自动忽略了。
+
+另外还要注意识别各种国产浏览器，如某某安全浏览器，某某旋风浏览器，它们只是做了一个壳，其核心调用的是IE，也有号称同时支持IE和Webkit的“双核”浏览器。
+
+不同的浏览器对JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同的浏览器对各个特性支持也不一样。
+
+在编写JavaScript的时候，就要充分考虑到浏览器的差异，尽量让同一份JavaScript代码能运行在不同的浏览器中。
+
+*****
+
+## (二)浏览器对象
+
+**JavaScript可以获取浏览器提供的很多对象，并进行操作。**
+
+浏览器对象模型主要包括window、history、location和document等对象，其中window对象是整个BOM的顶层对象。
+
+### ==1. window==
+
+**window[窗口]对象不但充当全局作用域，而且表示浏览器窗口。**
+
+window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
+
+兼容性：IE<=8不支持。
+
+```js
+'use strict';
+// 可以调整浏览器窗口大小试试:
+console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
+```
+
+对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
+
+#### window对象
+
+| document | 窗口中当前显示的文档对象 |
+| -------- | ------------------------ |
+| history  | 保存窗口最近加载的URL    |
+| location | 当前窗口的URL            |
+
+#### window常用方法
+
+1. prompt():显示可提示用户输入的对话框；
+2. alert():显示带有一个提示消息和一个确定按钮的警示框；
+3. confirm():显示一个带有提示信息、确定和取消按钮的确认框；
+4. close():关闭浏览器窗口；
+5. open():打开一个新的浏览器窗口，加载给定URL所指定的文档；
+6. setTimeout():在设定的毫秒数后调用函数或计算表达式；
+7. setInterval():按照设定的周期（以毫秒计）来重复调用函数或表达式；
+8. clearInterval():取消重复设置，与setInterval对应；
+
+********
+
+#### setTimeout()
+
+全局的 **`setTimeout()`** 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
+
+语法
+
+```js
+ar timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
+var timeoutID = scope.setTimeout(function[, delay]);//一般传入参数为function delay
+var timeoutID = scope.setTimeout(code[, delay]);
+```
+
+**参数**
+
+- `function`
+
+  [`function`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function) 是你想要在到期时间 (`delay`毫秒) 之后执行的[函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)。
+
+- `code`
+
+  这是一个可选语法，你可以使用字符串而不是[`function`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function) ，在`delay`毫秒之后编译和执行字符串 (使用该语法是**不推荐的，** 原因和使用 [`eval()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval)一样，有安全风险)。
+
+- `delay` 可选
+
+  延迟的毫秒数 (一秒等于 1000 毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay 取默认值 0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的 (delay 毫秒数) 值长，原因请查看[实际延时比设定值更久的原因：最小延迟时间](https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout#实际延时比设定值更久的原因：最小延迟时间)。
+
+- `arg1, ..., argN` 可选
+
+  附加参数，一旦定时器到期，它们会作为参数传递给function
+
+***
+
+**返回值**
+
+返回值`timeoutID`是一个正整数，表示定时器的编号。这个值可以传递给[`clearTimeout()`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearTimeout)来取消该定时器。
+
+需要注意的是 `setTimeout()` 和 [`setInterval()`](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval) 共用一个编号池，技术上，`clearTimeout()` 和 [`clearInterval()`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval) 可以互换。但是，为了避免混淆，不要混用取消定时函数。
+
+在同一个对象上（一个 window 或者 worker），`setTimeout()`或者`setInterval()`在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。
+
+***
+
+**示例**
+
+```html
+ <p>Live Example</p>
+    <button onclick="delayedAlert();">运行</button>
+    <p></p>
+    <button onclick="clearAlert();">终止</button>
+```
+
+```js
+<script>
+        var timeoutID;//定义一个全局变量
+        function delayedAlert() {
+            timeoutID = window.setTimeout(slowAlert, 2000);//两秒后运行slowAlert方法
+        }
+        function slowAlert() {//弹窗方法，不能与上面的方法写成同一个不然会变成递归
+            alert('That was really slow!');
+        }
+        function clearAlert() {
+            window.clearTimeout(timeoutID);//取消定时器
+        }
+</script>
+```
+
+**********
+
+#### setInterval()
+
+**`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
+
+**语法**
+
+```js
+var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
+var intervalID = setInterval(function[, delay]);
+var intervalID = setInterval(code, [delay]);
+```
+
+**参数**
+
+- `func`
+
+  要重复调用的[`函数`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)，每经过指定 `delay` 毫秒后执行一次。第一次调用发生在 `delay` 毫秒之后。
+
+- `code`
+
+  这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 [`eval()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) 存在相同的安全风险所以*不推荐*使用。
+
+- `delay`
+
+  是每次延迟的毫秒数（一秒等于 1000 毫秒），函数的每次调用会在该延迟之后发生。如果未指定，则其默认值为 0。参见下方的[延迟限制](https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval#延迟限制)以了解详细的 `delay` 的取值范围。
+
+- `arg1, ..., argN` 可选
+
+  当定时器过期的时候，将被传递给 *func* 函数的附加参数。
+
+**返回值**
+
+返回值 `intervalID` 是一个非零数值，用来标识通过 `setInterval()` 创建的定时器，这个值可以用来作为 [`clearInterval()`](https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval) 的参数来清除对应的定时器。
+
+*******
+
+**示例**
+
+```js
+<script type="text/javascript">
+        var end;//全局变量用来装setInterval的返回值
+        var count = 0;//计数器
+        function start() {//点击抽奖触发此函数
+            count = 1;//第一次执行完setInterval计数器为1
+            document.getElementById('spanInfo').innerHTML = '正在抽奖中...';//更改span显示内容
+            end = setInterval('getResult()', 1000);//1秒后触发getResult函数
+        }
+        
+        function getResult() {
+            for (let i = 1; i <= 9; i++) {
+                document.getElementById('t' + i).style.background = 'white';//全部奖项背景颜色设置为白色
+            }
+            count++;//运行一次计数器+1
+            var num = Math.ceil(Math.random() * 9);//随机数1-9
+            var obj = document.getElementById('t' + num);//取抽中奖项的id
+            obj.style.background = 'red';//让对应td变颜色
+
+            if (count >= 25) {//执行25次时
+                document.getElementById('spanInfo').innerHTML = obj.innerHTML;//更改span显示内容为抽中的奖项
+                clearInterval(end);//取消重复定时器
+            }
+        }
+</script>
+```
+
+```html
+ <div style="text-align: center; margin:50px">
+        <input type="button" value="点击抽奖" onclick="start();">
+        <!-- 获取抽奖结果 -->
+        <span id="spanInfo"></span>
+    </div>
+    <table id="myTable">
+        <tr>
+            <td id="t1">比特币1枚</td>
+            <td id="t2">谢谢参与</td>
+            <td id="t3">谢谢参与</td>
+        </tr>
+        <tr>
+            <td id="t4">谢谢参与</td>
+            <td id="t5">iPhone14</td>
+            <td id="t6">谢谢参与</td>
+        </tr>
+        <tr>
+            <td id="t7">谢谢参与</td>
+            <td id="t8">谢谢参与</td>
+            <td id="t9">智子一颗</td>
+        </tr>
+    </table>
+```
+
+```js
+<style type="text/css">
+        #myTable {
+            margin: 0px auto;
+            width: 500px;
+            height: 500px;
+        }
+
+        #myTable td {
+            border: solid 1px red;
+            text-align: center;
+            font-weight: bolder;
+        }
+</style>
+```
+
+********
+
+### ==2. location==
+
+**location[位置]对象表示当前页面的URL信息。**例如，一个完整的URL：
+
+```js
+http://www.example.com:8080/path/index.html?a=1&b=2#TOP
+```
+
+**location对象属性和方法**:
+
+- href属性:获取或设置网页地址；
+- reload方法:重新加载当前页面，相当于浏览器的刷新按钮；
+
+可以用location.href获取。要获得URL各个部分的值，可以这么写：
+
+```js
+location.protocol; // 'http'
+location.host; // 'www.example.com'
+location.port; // '8080'
+location.pathname; // '/path/index.html'
+location.search; // '?a=1&b=2'
+location.hash; // 'TOP'
+```
+
+要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
+
+```js
+'use strict';
+if (confirm('重新加载当前页' + location.href + '?')) {
+    location.reload();
+} else {
+    location.assign('/'); // 设置一个新的URL地址
+}
+```
+
+********
+
+### ==3. history==
+
+**history[历史]对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。**
+
+**history对象方法**：
+
+- back():后退一个页面，相当于浏览器后退按钮；
+- forward():前进一个页面，相对于浏览器前进按钮；
+- go():打开一个指定位置的页面；
+
+这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。
+
+==新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。==
+
+==**任何情况，你都不应该使用history这个对象了。**==
+
+*******
+
+### 4. navigator
+
+**navigator[导航员]对象表示浏览器的信息**，最常用的属性包括：
+
+```js
+navigator.appName：浏览器名称；
+navigator.appVersion：浏览器版本；
+navigator.language：浏览器设置的语言；
+navigator.platform：操作系统类型；
+navigator.userAgent：浏览器设定的User-Agent字符串。
+'use strict';
+console.log('appName = ' + navigator.appName);
+console.log('appVersion = ' + navigator.appVersion);
+console.log('language = ' + navigator.language);
+console.log('platform = ' + navigator.platform);
+console.log('userAgent = ' + navigator.userAgent);
+```
+
+==请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。==很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：
+
+```js
+var width;
+if (getIEVersion(navigator.userAgent) < 9) {
+    width = document.body.clientWidth;
+} else {
+    width = window.innerWidth;
+}
+```
+
+但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：
+
+```js
+var width = window.innerWidth || document.body.clientWidth;
+```
+
+==大多数时候，我们不会所有该对象，因为会被人为修改！==
+
+****
+
+### 5. screen
+
+**screen[屏幕]对象表示屏幕的信息**，常用的属性有：
+
+```js
+screen.width：屏幕宽度，以像素为单位；
+screen.height：屏幕高度，以像素为单位；
+screen.colorDepth：返回颜色位数，如8、16、24。
+'use strict';
+console.log('Screen size = ' + screen.width + ' x ' + screen.height);
+```
+
+******
+
+### 6. document
+
+document[文件]对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
+
+document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：
+
+```js
+'use strict';
+document.title = '努力学习JavaScript!';
+```
+
+请观察浏览器窗口标题的变化。
+
+#### a.获取DOM树节点
+
+要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。innerHTML:获取对象的内容
+
+我们先准备HTML数据：
+
+```html
+<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
+    <dt>摩卡</dt>
+    <dd>热摩卡咖啡</dd>
+    <dt>酸奶</dt>
+    <dd>北京老酸奶</dd>
+    <dt>果汁</dt>
+    <dd>鲜榨苹果汁</dd>
+</dl>
+```
+
+**用document对象提供的==getElementById()==和==getElementsByTagName()==可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点**：
+
+```js
+'use strict';
+var menu = document.getElementById('drink-menu');//获取id为drink-menu的DOM节点
+var drinks = document.getElementsByTagName('dt');//获取标签为dt的DOM节点
+var i, s;
+
+s = '提供的饮料有:';
+for (i=0; i<drinks.length; i++) {//遍历所有的dt标签
+    s = s + drinks[i].innerHTML + ',';//获取dt对象的内容
+}
+console.log(s);//提供的饮料有:摩卡,酸奶,果汁,
+
+摩卡
+热摩卡咖啡
+酸奶
+北京老酸奶
+果汁
+鲜榨苹果汁
+```
+
+**document对象还有一个cookie属性，可以获取当前页面的Cookie。**
+
+Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。
+
+Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。
+
+JavaScript可以通过document.cookie读取到当前页面的Cookie：
+
+document.cookie; // 'v=123; remember=true; prefer=zh' 由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：
+
+```js
+<!-- 当前页面在wwwexample.com -->
+<html>
+    <head>
+        <script src="http://www.foo.com/jquery.js"></script>
+    </head>
+    ...
+</html>
+```
+
+**如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。**
+
+**==为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。==**这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。
+
+**==为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。==**
+
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-15-DOM\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-15-DOM\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..a55406b
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-15-DOM\347\254\224\350\256\260.md"
@@ -0,0 +1,340 @@
+# 操作DOM
+
+**由于HTML文档被浏览器解析后就是一棵DOM树(==浏览器网页就是应该DOM树型结构==)，要改变HTML的结构，就需要通过JavaScript来操作DOM。**
+
+始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
+
+- **更新**：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
+- **遍历**：遍历该DOM节点下的子节点，以便进行进一步操作；
+- **添加**：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
+- **删除**：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
+
+*********
+
+## 获取DOM节点
+
+**在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。**
+
+### DOM0
+
+**最常用的方法是：**
+
+- **document.getElementById(id)**
+- **document.getElementsByTagName(标签名)**
+- **CSS选择器document.getElementsByClassName(class名)。**
+
+由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
+
+例如：
+
+```js
+// 返回ID为'test'的节点：
+var test = document.getElementById('test');
+
+//返回一个集合(所有的h2) HTMLCollection
+var myh2 = document.getElementsByTagName('h2');
+console.log(username[0]);//取第一个h2标签，下标为0
+
+//返回一个HTMLCollection,注意，集合是有下标的,获取元素需要明确是第几个元素.
+var myh2 = document.getElementsByClassName('H2');
+
+// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
+var trs = document.getElementById('test-table').getElementsByTagName('tr');
+
+// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
+var reds = document.getElementById('test-div').getElementsByClassName('red');
+
+// 获取节点test下的所有直属子节点:
+var cs = test.children;
+```
+
+******
+
+### DOM1
+
+第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：
+
+```js
+ //querySelector(CSS选择器)方法返回文档中匹配指定CSS选择器的一个元素;
+var q1 = document.querySelector('#q1');//id
+var mySelect = document.querySelector('input');
+var mySelect = document.querySelector('.myH2');//class
+var mySelect = document.querySelector('div span');//div下的span标签
+
+////querySelectorAll(CSS选择器)方法返回文档中匹配的所有CSS选择器的元素；返回一个集合NodeList
+//通过querySelectorAll获取q1节点内的符合条件的所有节点：
+var ps = q1.querySelectorAll('div.highlighted > p');
+```
+
+注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。
+
+严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。
+
+==以上是原生代码，之后尽量使用jQuery==
+
+********
+
+### DOM2优先级
+
+```html
+<button onclick="sayHi()" id="btn">点击</button><br>
+<span id="sp"></span>
+
+<script type="text/javascript">
+//DOM2：优先级更高，点击之后输出的是靓女
+btn.onclick = () => {
+	document.getElementById('sp').innerHTML = '你好，靓女.'
+}
+
+function sayHi(){
+	document.getElementById('sp').innerHTML = '你好，帅哥.'
+}
+</script>
+```
+
+************
+
+## 添加节点和创建节点
+
+**很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个新的节点**
+
+### 创建节点
+
+| 方法             | 描述                                                         |
+| ---------------- | ------------------------------------------------------------ |
+| createElement()  | 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 |
+| createTextNode() | 创建一个文本节点，可以传入文本内容                           |
+| innerHTML()      | 也能达到创建节点的效果，直接添加到指定位置                   |
+
+### 添加节点
+
+appendChild():向元素中添加新的子节点，作为最后一个子节点
+
+```html
+<div id="box1" style="text-align: center;">
+        <!-- <h2>我是新创建的H2</h2> -->
+</div>
+<button id="btn1">创建元素</button>&nbsp;
+```
+
+```js
+<script>
+var box = document.getElementById('box1');
+var btn1 = document.getElementById('btn1');
+var myH2;
+btn1.onclick = () => {
+	var myh2 = document.createElement('h2');//创建元素节点
+	var myTxt = document.createTextNode('我是新创建的H2');//创建文本节点
+	myh2.appendChild(myTxt); //添加子节点
+	if (box.childElementCount == 0) {
+		box.appendChild(myh2);
+		myH2 = document.querySelector('#box1 h2');
+    }
+}
+
+
+</script>
+```
+
+*********
+
+## 插入DOM
+
+当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？
+
+**如果这个DOM节点是空的，例如，`<div></div>`，那么，直接使用innerHTML = 'child'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。**
+
+**如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。**
+
+********
+
+#### a.插入到后面
+
+有两个办法可以插入新的节点。**一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。**例如：
+
+```js
+<!-- HTML结构 -->
+<p id="js">JavaScript</p>
+<div id="list">
+    <p id="java">Java</p>
+    <p id="python">Python</p>
+    <p id="scheme">Scheme</p>
+</div>
+```
+
+把`<p id="js">JavaScript</p>添加到<div id="list">`的最后一项：
+
+```js
+var
+    js = document.getElementById('js'),
+    list = document.getElementById('list');
+list.appendChild(js);//追加
+```
+
+现在，HTML结构变成了这样：
+
+```js
+<!-- HTML结构 -->
+<div id="list">
+    <p id="java">Java</p>
+    <p id="python">Python</p>
+    <p id="scheme">Scheme</p>
+    <p id="js">JavaScript</p>
+</div>
+```
+
+因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。
+
+**更多的时候我们会从零创建一个新的节点，然后插入到指定位置**：
+
+```js
+var
+    list = document.getElementById('list'),
+    haskell = document.createElement('p');//创建一个p标签
+haskell.id = 'haskell';
+haskell.innerText = 'Haskell';
+list.appendChild(haskell);
+```
+
+这样我们就动态添加了一个新的节点：
+
+```js
+<!-- HTML结构 -->
+<div id="list">
+    <p id="java">Java</p>
+    <p id="python">Python</p>
+    <p id="scheme">Scheme</p>
+    <p id="haskell">Haskell</p>
+</div>
+```
+
+动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，**下面的代码动态创建了一个<style>节点，然后把它添加到节点的末尾，这样就动态地给文档添加了新的CSS定义**：
+
+```js
+var d = document.createElement('style');//创建空style标签
+d.setAttribute('type', 'text/css');
+//设置属性type=text/css(通过这个属性，可以设置任意的值)
+d.innerHTML = 'p { color: red }';//设置标签内容
+document.getElementsByTagName('head')[0].appendChild(d);//获取head并追加一个元素,[0]是head
+```
+
+可以在Chrome的控制台执行上述代码，观察页面样式的变化。
+
+如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。
+
+****************
+
+#### b.插入到前面insertBefore
+
+**还是以上面的HTML为例，假定我们要把Haskell插入到Python之前**：
+
+```js
+<!-- HTML结构 -->
+<div id="list">
+    <p id="java">Java</p>
+    <p id="python">Python</p>
+    <p id="scheme">Scheme</p>
+</div>
+```
+
+可以这么写：
+
+```js
+var
+    list = document.getElementById('list'),
+    ref = document.getElementById('python'),
+    haskell = document.createElement('p');
+haskell.id = 'haskell';
+haskell.innerText = 'Haskell';
+list.insertBefore(haskell, ref);
+//要包涵的节点.(新节点,旧节点)haskell插到ref的前面
+```
+
+新的HTML结构如下：
+
+```js
+<!-- HTML结构 -->
+<div id="list">
+    <p id="java">Java</p>
+    <p id="haskell">Haskell</p>
+    <p id="python">Python</p>
+    <p id="scheme">Scheme</p>
+</div>
+```
+
+可见，**使用insertBefore重点是要拿到一个“参考子节点”的引用。**很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：
+
+```js
+var
+    i, c,
+    list = document.getElementById('list');
+for (i = 0; i < list.children.length; i++) {
+    c = list.children[i]; // 拿到第i个子节点
+}
+```
+
+*****
+
+## 删除DOM
+
+删除一个DOM节点就比插入要容易得多。
+
+**要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉**：
+
+```js
+// 拿到待删除节点:
+var self = document.getElementById('to-be-removed');
+// 拿到父节点:
+var parent = self.parentElement;
+// 删除:
+var removed = parent.removeChild(self);
+removed === self; // true
+```
+
+==注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。==
+
+当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。
+
+例如，对于如下HTML结构：
+
+```js
+<div id="parent">
+    <p>First</p>
+    <p>Second</p>
+</div>
+```
+
+当我们用如下代码删除子节点时：
+
+```js
+var parent = document.getElementById('parent');
+//删除是一个动态的过程：
+parent.removeChild(parent.children[0]);
+parent.removeChild(parent.children[1]); //因为没有东西可删 <-- 浏览器报错
+```
+
+浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当First节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。
+
+==因此，删除多个节点时，要注意children属性时刻都在变化。==(老大死掉了，老二继位)
+
+*****
+
+## 替换元素
+
+**`Node.replaceChild()`** 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
+
+```js
+parentNode.replaceChild(newChild, oldChild);
+```
+
+示例:继续上面的例子把h2换成h1
+
+```js
+ btn3.onclick = () => {
+            var myh1 = document.createElement('h1');
+            var myTxt = document.createTextNode('我是替换的的H1');
+            myh1.appendChild(myTxt); //添加子节点
+            box.replaceChild(myh1,myH2);//(新元素,旧元素)
+        }
+```
+
-- 
Gitee


From 6a5669cf7d01ec68070e7c08258c63b82888004f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Wed, 16 Nov 2022 05:35:19 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈枫 <1687425871@qq.com>
---
 ...55\346\224\276\347\273\203\344\271\240.md" | 161 ++++++++++++++++++
 ...71\346\237\245\347\273\203\344\271\240.md" |  61 +++++++
 2 files changed, 222 insertions(+)
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-08-\347\217\255\347\272\247\346\212\275\345\217\267\345\222\214\345\233\276\347\211\207\346\222\255\346\224\276\347\273\203\344\271\240.md"
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-15-\350\212\202\347\202\271\345\242\236\345\210\240\346\224\271\346\237\245\347\273\203\344\271\240.md"

diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-08-\347\217\255\347\272\247\346\212\275\345\217\267\345\222\214\345\233\276\347\211\207\346\222\255\346\224\276\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-08-\347\217\255\347\272\247\346\212\275\345\217\267\345\222\214\345\233\276\347\211\207\346\222\255\346\224\276\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..ab283fc
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-08-\347\217\255\347\272\247\346\212\275\345\217\267\345\222\214\345\233\276\347\211\207\346\222\255\346\224\276\347\273\203\344\271\240.md"
@@ -0,0 +1,161 @@
+# 班级抽号
+
+```css
+ <style type="text/css">
+        #ctable td {
+            text-align: center;
+            font-weight: 200px;
+            border: solid 1px red;
+        }
+
+        #ctable {
+            margin: 0px auto;
+            width: 600px;
+            height: 50px;
+        }
+    </style>
+```
+
+```js
+ <script type="text/javascript">
+        var end ;
+        var count =0;
+        function Draw(){
+            count=1;
+            document.getElementById("spanInfo").innerHTML='看看是哪个倒霉蛋';
+          end= setInterval('turn()', 500);
+        }
+
+        function turn(){
+            for (let i = 1; i <= 45; i++) {//背景颜色全部改为白色
+                document.getElementById('t' + i).style.background = 'white';
+            }
+            count++;
+            var number=Math.ceil(Math.random()*45);//随机数
+           var obj= document.getElementById(`t${number}`)//获取抽到的id
+           obj.style.background="red";//改变背景颜色
+        
+           if(count>25){//转25次停
+            document.getElementById("spanInfo").innerHTML=`就决定是你了${obj.innerHTML}`;
+            clearInterval(end);
+           }
+
+        }
+    </script>
+```
+
+```html
+ <div style="margin: 50px 11px ;">
+        <input type="button" value="开始抽奖" onclick="Draw()">
+        <samp id="spanInfo"></samp>
+    </div>
+    <table id="ctable">
+        <tr>
+            <td id="t1">翁章彬</td>
+            <td id="t2">谢琰宸</td>
+            <td id="t3">陈枫</td>
+            <td id="t4">卢佳凯</td>
+            <td id="t5">黄炜杰</td>
+            <td id="t6">何睿</td>
+            <td id="t7">吴守康</td>
+            <td id="t8">黄楷钊</td>
+            <td id="t9">陈烽杰</td>
+        </tr>
+
+        <tr>
+            <td id="t10">余金星</td>
+            <td id="t11">刘嘉远</td>
+            <td id="t12">周泽强</td>
+            <td id="t13">洪灿芳</td>
+            <td id="t14">薛晖</td>
+            <td id="t15">吴明杰</td>
+            <td id="t16">胡志文</td>
+            <td id="t17">侯锟铖</td>
+            <td id="t18">杨晨哲</td>
+        </tr>
+
+        <tr>
+            <td id="t19">陈志梁</td>
+            <td id="t20">吴泳泰</td>
+            <td id="t21">李雅芸</td>
+            <td id="t22">詹源铠</td>
+            <td id="t23">陈钰锋</td>
+            <td id="t24">杨丰华</td>
+            <td id="t25">曾鹏</td>
+            <td id="t26">吴昊绩</td>
+            <td id="t27">吴超</td>
+        </tr>
+
+        <tr>
+            <td id="t28">胡江雄</td>
+            <td id="t29">谷兆明</td>
+            <td id="t30">陈洋</td>
+            <td id="t31">张平</td>
+            <td id="t32">危振山</td>
+            <td id="t33">达兴建</td>
+            <td id="t34">张静</td>
+            <td id="t35">叶小杰</td>
+            <td id="t36">周飘</td>
+        </tr>
+
+        <tr>
+            <td id="t37">陈振国</td>
+            <td id="t38">贺晋卓</td>
+            <td id="t39">李涛</td>
+            <td id="t40">赖杰林</td>
+            <td id="t41">刘旭涛</td>
+            <td id="t42">田鑫强</td>
+            <td id="t43">江嘉兴</td>
+            <td id="t44">巫晨羿</td>
+            <td id="t45">范雅欢</td>
+        </tr>
+
+    </table>
+```
+
+
+
+
+
+
+
+
+
+
+
+# 图片播放
+
+```js
+ <script type="text/javascript">
+        var i=1;
+        var end;
+        function playImg(){
+            end=setInterval("un()",2000);
+        }
+            
+        function un(){
+            if(i==6){
+                i=1
+            }
+            document.getElementById("imgid").src="img/img"+i+".jpg";
+            i++;
+            if(i==6){
+                i=1
+            }
+            
+        }
+
+        function endimg(){
+          clearInterval(end);
+        }
+    </script>
+```
+
+```html
+<div >
+    <img src="img/img1.jpg" id="imgid"><br>
+    <input type="button" id="playimg" value="播放图片" onclick="playImg()"><br>
+    <input type="button" id="endimg" value="停止播放" onclick="endimg()">
+   </div>
+```
+
diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-15-\350\212\202\347\202\271\345\242\236\345\210\240\346\224\271\346\237\245\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-15-\350\212\202\347\202\271\345\242\236\345\210\240\346\224\271\346\237\245\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..79a1e5b
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-15-\350\212\202\347\202\271\345\242\236\345\210\240\346\224\271\346\237\245\347\273\203\344\271\240.md"
@@ -0,0 +1,61 @@
+```html
+<style type="text/css">
+        #box1 {
+            width: 500px;
+            height: 100px;
+            border: 1px solid black;
+        }
+    </style>
+```
+
+```html
+ <div id="box1" style="text-align: center;">
+        <!-- <h2>我是新创建的H2</h2> -->
+    </div>
+    <button id="btn1">创建元素</button>&nbsp;
+    <button id="btn2">删除元素</button>&nbsp;
+    <button id="btn3">修改元素</button>&nbsp;
+    <button id="btn4">插入元素</button>&nbsp;
+```
+
+```js
+<script>
+        var box = document.getElementById('box1');
+        var btn1 = document.getElementById('btn1');
+        var myH2;
+        btn1.onclick = () => {
+            //创建一个h2元素节点
+            var myh2 = document.createElement('h2');
+            var myTxt = document.createTextNode('我是新创建的H2');
+            myh2.appendChild(myTxt); //添加子节点
+            if (box.childElementCount == 0) {
+                box.appendChild(myh2);
+                myH2 = document.querySelector('#box1 h2');
+            }
+        }
+
+        btn2.onclick = () => {
+            myH2 = document.querySelector('#box1 h2');
+            if (myH2) {
+                box.removeChild(myH2);
+            }
+        }
+
+        btn3.onclick = () => {//修改
+            var myh1 = document.createElement('h1');
+            var myTxt = document.createTextNode('我是替换的的H1');
+            myh1.appendChild(myTxt); //添加子节点
+            box.replaceChild(myh1,myH2);
+        }
+        btn4.onclick = ()=>{//插入
+            var myh2 = document.createElement('h2');
+            var myTxt = document.createTextNode('我新插入的h2');
+            myh2.appendChild(myTxt); //添加子节点
+            box.insertBefore(myh2,myH2);
+        }
+
+
+
+    </script>
+```
+
-- 
Gitee


From 9da98ba098389956d4a75435d7f41db72747abe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Thu, 17 Nov 2022 00:47:46 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈枫 <1687425871@qq.com>
---
 ...50\345\215\225\347\273\203\344\271\240.md" | 319 ++++++++++++++++++
 1 file changed, 319 insertions(+)
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-16\346\263\250\345\206\214\350\241\250\345\215\225\347\273\203\344\271\240.md"

diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-16\346\263\250\345\206\214\350\241\250\345\215\225\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-16\346\263\250\345\206\214\350\241\250\345\215\225\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..66802b5
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-16\346\263\250\345\206\214\350\241\250\345\215\225\347\273\203\344\271\240.md"
@@ -0,0 +1,319 @@
+```javascript
+1.注册
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>注册表单验证</title>
+		<style type="text/css">
+			.errInfo{color: red; font-size: 12px;}
+			.errInfo img{ vertical-align:middle;}
+		</style>
+		<script type="text/javascript">
+			//检查用户名
+			
+			function CheckAccount()
+			{
+			var a=document.querySelector('#txtAccount');
+			var b=document.querySelector('#spanAccount');
+			
+			if (a.value=='') {
+				b.innerHTML='请输入用户名'
+			}else
+			{
+				b.innerHTML=''
+			}			
+			}
+			
+			//检查密码
+			function CheckPwd()
+			{
+			var a=document.querySelector('#txtPwd');
+			var b=document.querySelector('#spanPwd');
+			var c=document.querySelector('#txtAccount');
+			if (c.value=='') {
+				
+				b.innerHTML='请先输入用户名后，再输入密码';
+				a.value='';
+
+			}else if (a.value=='') {
+
+				b.innerHTML='请输入密码'
+			}else
+			{
+				b.innerHTML=''
+			}			
+			}
+			
+			
+			//检查密码确认
+			function CheckPwdOk()
+			{
+			var a=document.querySelector('#txtPwd');
+
+			var b=document.querySelector('#txtPwdOk');
+
+			var c=document.querySelector('#spanPwdOk');
+			
+			if (a.value=='') {
+				
+				c.innerHTML='请先输入密码后，再输入确认密码';
+				b.value='';
+
+			}else if(b.value=='')
+			{
+				c.innerHTML='请输入确认密码';
+			}else if(b.value!=a.value)
+			{
+				c.innerHTML='确认密码错误';
+			}else
+			{
+				c.innerHTML=''
+			}
+			}
+			
+			
+			//检查性别
+			function CheckSex()
+			{   var c=0;
+				var uuioo=document.getElementsByName('sex');
+				var b=document.querySelector('spanSex');
+				for (let i = 0; i < uuioo.length; i++) {
+					if (uuioo[i].checked==true) {
+						c=1;
+					}
+					
+				}
+				if(c==0)
+				{
+                b.innerHTML='请选择性别';
+				}
+
+			
+			}
+		
+			//检查爱好
+			function CheckHobby()
+			{
+				var count=0;
+				var a=document.getElementsByName('hobby');
+				var b=document.querySelector('#spanHobby');
+
+				for (let i = 0; i < a.length; i++) {
+					if (a[i].checked==true) {
+						count++;
+					}		
+				}
+
+				if (count>0) {
+					b.innerHTML=''
+				}else
+				{
+					b.innerHTML='请选择最少一个爱好'
+				}
+			}
+			
+				
+			
+			function CheckProfessional()
+			{
+				var a=document.querySelector('#selProfessional');
+
+				// var d=a.options[a.selectedIndex].value
+
+				var c=document.querySelector('#spanProfessional');
+
+				if (a.selectedIndex==0) {
+
+ 				  c.innerHTML='请选择'
+
+				}else
+
+				{
+					c.innerHTML=''
+				}
+			}
+			//注册表单提交
+			function reg()
+			{	var mmmm=document.querySelector('form');
+
+				var r=mmmm.action;
+				
+				var rr=mmmm.onsubmit;
+
+				mmmm.action='';
+
+				mmmm.onsubmit='';
+
+				CheckAccount();
+				CheckPwd();
+				CheckPwdOk();
+				CheckSex();
+				CheckHobby();
+				CheckProfessional();
+
+				var c=0;
+			
+				var b=document.querySelectorAll('.errInfo');
+
+                for (let i = 0; i < b.length; i++) {
+
+					if(b[i].innerHTML!='')
+					{
+                       c++;
+					}
+				}
+				if (c>0) {	
+					
+					alert('请填完');
+
+				}else
+				{	
+					alert('注册成功');
+					
+					mmmm.action=r;
+				    
+					mmmm.onsubmit=rr;
+				}
+				 
+			}
+			
+		</script>
+	</head>
+	<body>
+		<form action="456.html" onsubmit="return reg();">
+		<table width="1000" align="center">
+			<caption>用户注册</caption>
+			<tr>
+				<td width="300" align="right" height="30">用户名:</td>
+				<td width="700"><input type="text" id="txtAccount" onblur="CheckAccount();">
+					<span id="spanAccount" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">密码:</td>
+				<td width="700"><input type="password" id="txtPwd" onblur="CheckPwd();">
+					<span id="spanPwd" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">密码确认:</td>
+				<td width="700"><input type="password" id="txtPwdOk" onblur="CheckPwdOk();">
+					<span id="spanPwdOk" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">性别:</td>
+				<td width="700">
+					<input type="radio" name="sex" id="rdBoy" value="男" onblur="CheckSex();">男
+					<input type="radio" name="sex" id="rdGirl" value="女" onblur="CheckSex();">女	
+					<span id="spanSex" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">专业:</td>
+				<td width="700">
+					<select id="selProfessional" onblur="CheckProfessional();">
+						<option value="">--请选择--</option>
+						<option value="软件开发">软件开发</option>
+						<option value="电子商务">电子商务</option>
+						<option value="国际贸易">国际贸易</option>
+						<option value="工商管理">工商管理</option>
+						<option value="高级护理">高级护理</option>
+					</select>
+					<span id="spanProfessional" class="errInfo"></span>
+				</td>
+			</tr>			
+			<tr>
+				<td width="300" align="right" height="30">爱好:</td>
+				<td width="700" >
+					<input type="checkbox" name="hobby" value="抽烟" onblur="CheckHobby();"/>抽烟
+					<input type="checkbox" name="hobby" value="喝酒" onblur="CheckHobby();"/>喝酒
+					<input type="checkbox" name="hobby" value="打游戏" onblur="CheckHobby();"/>打游戏
+					<input type="checkbox" name="hobby" value="烫头发" onblur="CheckHobby();"/>烫头发
+					<input type="checkbox" name="hobby" value="足球" onblur="CheckHobby();"/>足球
+					<input type="checkbox" name="hobby" value="篮球" onblur="CheckHobby();"/>篮球
+					<span id="spanHobby" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">自我介绍:</td>
+				<td width="700">
+					<textarea id="mySelf" rows="10" cols="60"></textarea>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">&nbsp;</td>
+				<td width="700">
+					<input type="submit" value="注册" id="mmmm"/>
+					<input type="reset" value="取消" />
+				</td>
+			</tr>
+		</table>
+		
+		</form>		
+	</body>
+</html>
+```
+
+```javascript
+2.拖动
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #o{
+           border: 2px red solid;
+           width: 200px;
+           height: 200px;
+        }
+
+    </style>
+</head>
+<body>
+    <div id="o"></div>
+    <script>
+        var oo=document.querySelector('#o');
+
+        oo.style.marginLeft='10px';
+
+        oo.style.marginTop='10px';
+
+        oo.onmousedown = ()=>
+        {      
+            var u=window.event ||arguments[0];
+
+            var ny=u.clientY;
+            var nx=u.clientX;
+
+            var my=oo.style.marginTop;
+            var mx=oo.style.marginLeft;
+         
+            var yy=u.clientY-parseInt(my);
+            var xx=u.clientX-parseInt(mx);
+
+            oo.onmousemove =()=>
+            {
+            var uu=window.event||arguments[0];
+
+            var  nny=uu.clientY;
+            var  nnx=uu.clientX;
+
+                oo.style.marginLeft =nnx-xx+'px'
+                oo.style.marginTop =nny-yy+'px'
+            }
+          
+        }
+        oo.onmouseup = () =>{
+           oo.onmousemove =null;
+        }
+
+    </script>
+</body>
+</html>
+```
-- 
Gitee


From dfc0088a525041a0f05e3ecf3452c02693e0d5cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Thu, 17 Nov 2022 00:48:40 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈枫 <1687425871@qq.com>
---
 ...13\344\273\266\347\254\224\350\256\260.md" | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-16-\344\272\213\344\273\266\347\254\224\350\256\260.md"

diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-16-\344\272\213\344\273\266\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-16-\344\272\213\344\273\266\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..597c4e7
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-16-\344\272\213\344\273\266\347\254\224\350\256\260.md"
@@ -0,0 +1,151 @@
+# 事件
+
+## 1.点击事件：
+
+- onclick：单击事件
+
+
+- ondblclick：双击事件
+
+
+## 2.焦点事件
+
+- onblur：失去焦点
+
+- onfocus:元素获得焦点。
+
+
+## 3.加载事件：
+
+- onload：一张页面或一幅图像完成加载。
+
+
+## 4.鼠标事件：
+
+- onmousedown： 鼠标按钮被按下。
+
+
+- onmouseup： 鼠标按键被松开。
+
+
+- onmousemove： 鼠标被移动。
+
+
+- onmouseover： 鼠标移到某元素之上。
+
+
+- onmouseout ：鼠标从某元素移开。
+
+
+鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键
+
+##### 5.键盘事件：
+
+- onkeydown ：某个键盘按键被按下。
+
+
+- onkeyup： 某个键盘按键被松开。
+
+
+- onkeypress ：某个键盘按键被按下并松开。
+
+
+##### 6.选择和改变
+
+- onchange ：域的内容被改变。
+
+
+- onselect ：文本被选中。
+
+
+##### 7.表单事件：
+
+- onsubmit ：确认按钮被点击。
+
+
+- onreset： 重置按钮被点击
+
+
+##### 8.`事件捕获（event capturing）`：
+
+ 当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。
+
+##### `事件冒泡（dubbed bubbling）`： 事件源 =>根节点（由内到外）进行事件传播。
+
+无论是事件捕获还是[事件冒泡](https://so.csdn.net/so/search?q=事件冒泡&spm=1001.2101.3001.7020)，它们都有一个共同的行为，就是事件传播。
+
+dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
+
+**addEventListener的第三个参数**
+在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而，addEventListener还可以传入第三个参数：
+
+```javascript
+element.addEventListener(event, function, useCapture);
+```
+
+第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
+**事件冒泡**
+
+```javascript
+<body>
+  <div id="parent">
+    父元素
+    <div id="child">
+      子元素
+    </div>
+  </div>
+  <script type="text/javascript">
+    var parent = document.getElementById("parent");
+    var child = document.getElementById("child");
+
+    document.body.addEventListener("click",function(e){
+      console.log("click-body");
+    },false);
+
+    parent.addEventListener("click",function(e){
+      console.log("click-parent");
+    },false);
+
+    child.addEventListener("click",function(e){
+      console.log("click-child");
+    },false);
+  </script>
+</body>
+```
+
+事件触发顺序是由内到外的，这就是事件冒泡。如果点击子元素不想触发父元素的事件，可使用event.stopPropagation();方法：
+
+```javascript
+child.addEventListener("click",function(e){
+　　console.log("click-child");
+  　e.stopPropagation();
+},false);
+1234
+```
+
+**事件捕获**
+修改事件冒泡的代码：
+
+```javascript
+var parent = document.getElementById("parent");
+var child = document.getElementById("child");
+
+document.body.addEventListener("click",function(e){
+  console.log("click-body");
+  },false);
+
+parent.addEventListener("click",function(e){
+  console.log("click-parent---事件传播");
+},false);
+    　　　　 
+　　　　 //新增事件捕获事件代码
+parent.addEventListener("click",function(e){
+  console.log("click-parent--事件捕获");
+},true);
+
+child.addEventListener("click",function(e){
+  console.log("click-child");
+},false);
+```
+
+父元素通过事件捕获的方式注册了click事件，所以在事件捕获阶段就会触发，然后到了目标阶段，即事件源，之后进行事件冒泡，parent同时也用冒泡方式注册了click事件，所以这里会触发冒泡事件，最后到根节点（body）。这就是整个事件流程。
\ No newline at end of file
-- 
Gitee