From c5755a886eacebd01a8500f0fcf3590ae1f85e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E5=88=A9=E7=BE=A4?= <2246026162@qq.com>
Date: Tue, 22 Nov 2022 23:50:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\351\200\211\345\217\215\351\200\211.html" | 117 ++++++++++++++++++
 .../2022-11-21DOM.md"                         |  35 ++++++
 2 files changed, 152 insertions(+)
 create mode 100644 "32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_21\345\205\250\351\200\211\345\217\215\351\200\211.html"
 create mode 100644 "32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-21DOM.md"
diff --git "a/32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_21\345\205\250\351\200\211\345\217\215\351\200\211.html" "b/32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_21\345\205\250\351\200\211\345\217\215\351\200\211.html"
new file mode 100644
index 0000000..6f1b6f5
--- /dev/null
+++ "b/32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_21\345\205\250\351\200\211\345\217\215\351\200\211.html"
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>getElementsByTagName获取checkbox进行全选</title>
+    <style type="text/css">
+            #myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
+			#myTable td,#myTable th{ background-color: white;}
+			#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px; 
+			text-align: center;}
+    </style>
+</head>
+
+<body>
+    <table cellspacing="1" id="myTable">
+        <tr>
+            <th width="200">
+                <input type="checkbox" id="selAll" onchange="selectAll()" />全选
+                <input type="checkbox" id="selInvert" onchange="selectInvert()" />反选
+            </th>
+            <th width="200">姓名</th>
+            <th width="200">性别</th>
+            <th width="200">专业</th>
+            <th width="200">爱好</th>
+        </tr>
+        <tr>
+            <td><input type="checkbox" /></td>
+            <td>刘备</td>
+            <td>男</td>
+            <td>软件开发</td>
+            <td>抽烟</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox" /></td>
+            <td>关羽</td>
+            <td>男</td>
+            <td>国际贸易</td>
+            <td>喝酒</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox"/></td>
+            <td>张飞</td>
+            <td>男</td>
+            <td>园林设计</td>
+            <td>烫头发</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox" /></td>
+            <td>赵云</td>
+            <td>男</td>
+            <td>平面设计</td>
+            <td>抽烟</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox" /></td>
+            <td>黄忠</td>
+            <td>男</td>
+            <td>影视制作</td>
+            <td>玩游戏</td>
+        </tr>
+        <tr>
+            <td><input type="checkbox" /></td>
+            <td>小乔</td>
+            <td>女</td>
+            <td>高级护理</td>
+            <td>唱歌</td>
+        </tr>
+    </table>
+    <script>
+        //全选
+        var num = 0;
+        var inputArr = document.querySelectorAll("tr td input");
+        function selectAll() {
+            var demo = document.querySelector("#selAll").checked;
+            //console.log(demo);
+            if (demo) inputArr.forEach(e => e.checked = true);
+            else inputArr.forEach(e => e.checked = false);
+            if(demo){
+                num = inputArr.length;
+            }
+        }
+        //给每个按键都绑定切换事件
+        for (let i = 0; i < inputArr.length; i++) {
+            inputArr[i].onchange = function () {
+                var demo = document.querySelector("#selAll");
+                inputArr[i].checked == true ? num++ : num--;
+                if(num == inputArr.length){
+                    demo.checked =true;
+                }else{
+                    demo.checked =false;
+                }
+                console.log(num);
+            }
+        }
+        //反选
+        function selectInvert(){
+            for(let i = 0; i< inputArr.length;i++){
+                if(inputArr[i].checked==true){
+                    inputArr[i].checked=false;
+                }else{
+                    inputArr[i].checked=true;
+                }
+            }
+        }
+
+        
+
+
+
+
+
+       
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-21DOM.md" "b/32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-21DOM.md"
new file mode 100644
index 0000000..e6fc3d7
--- /dev/null
+++ "b/32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-21DOM.md"
@@ -0,0 +1,35 @@
+###  节点：
+
+一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。
+
+```
+元素节点 nodeType为1。
+
+属性节点 nodeType为2。
+```
+
+子节点：node.childNode 得到的是所有的子节点，包括元素节点，文本节点等。 文本节点 nodeType为3。
+
+父节点
+
+父节点：node.parentNode 得到的是离元素最近的父级节点，如果找不到父节点节返回为null
+
+### 子节点
+
+子节点：node.childNode 得到的是所有的子节点，包括元素节点，文本节点等。、
+
+### 兄弟节点
+
+兄弟节点：
+
+返回上/下一个兄弟节点，包含元素节点、文本节点等。
+
+下一个兄弟节点node.nextSibling
+
+上一个兄弟节点node.previousSibling
+
+返回上/下一个兄弟元素节点（IE9以上兼容）
+
+下一个兄弟元素节点node.nextElementSibling
+
+上一个兄弟元素节点node.previousElementSibling
\ No newline at end of file
-- 
Gitee


姓名	性别	专业	爱好
刘备	男	软件开发	抽烟
关羽	男	国际贸易	喝酒
张飞	男	园林设计	烫头发
赵云	男	平面设计	抽烟
黄忠	男	影视制作	玩游戏
小乔	女	高级护理	唱歌