From c92f595fa12efbb18fc54ff723d5ca9cde362213 Mon Sep 17 00:00:00 2001
From: Harshreich <773407390@qq.com>
Date: Sun, 20 Nov 2022 20:57:01 +0800
Subject: [PATCH] .

---
 .../22.11.20 (1).html"                        | 36 ++++++++++
 .../22.11.20 (2).html"                        | 35 ++++++++++
 .../\347\254\224\350\256\260/22.11.20DOM.md"  | 66 +++++++++++++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 "10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (1).html"
 create mode 100644 "10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (2).html"
 create mode 100644 "10\351\231\210\346\230\212\347\253\245/\347\254\224\350\256\260/22.11.20DOM.md"
diff --git "a/10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (1).html" "b/10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (1).html"
new file mode 100644
index 0000000..5f3f91c
--- /dev/null
+++ "b/10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (1).html"	
@@ -0,0 +1,36 @@
+<!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>
+</head>
+<body>
+    <script type="text/javascript">
+        let a=true
+        function show() {
+            var div= document.getElementById('div')
+            if (a) {
+            a=!a
+            var newH2=document.createElement('h2')
+            var text =document.createTextNode('封校三天 快乐无边')
+            newH2.appendChild(text)
+            div.appendChild(newH2);
+            }
+            
+            var newButtom=document.getElementById('button')
+            if (newButtom.value==='展开') {
+                div.style.display=''
+                newButtom.value='收起'
+            }else{
+                div.style.display='none'
+                newButtom.value='展开'
+            }          
+        }
+    </script>
+    <input type="button" value="展开" onclick="show()"id="button" >
+    <div id="div"style="display: none"></div>
+    <!-- <h2 id="h2"style="display: none;></h2> -->
+</body>
+</html>
\ No newline at end of file
diff --git "a/10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (2).html" "b/10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (2).html"
new file mode 100644
index 0000000..abf3a68
--- /dev/null
+++ "b/10\351\231\210\346\230\212\347\253\245/\344\275\234\344\270\232/22.11.20 (2).html"	
@@ -0,0 +1,35 @@
+<!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>
+        #box{
+            width: 500px;
+            height: 100px;
+            border: 2px solid rosybrown;
+        }
+    </style>
+</head>
+<body>
+    <script type="text/javascript">
+        function copy() {
+            var div = document.getElementById('box');
+            var newH2=document.createElement('h2')
+            var text=document.getElementById('inp').value
+            var newText =document.createTextNode(text)
+            var input=document.getElementById('inp')
+            newH2.appendChild(newText)
+            div.appendChild(newH2);
+        }
+    </script>
+    <input type="text" id="inp" >&nbsp;
+    <button onclick="copy()">复制</button>
+    <div id="box"> 
+
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/10\351\231\210\346\230\212\347\253\245/\347\254\224\350\256\260/22.11.20DOM.md" "b/10\351\231\210\346\230\212\347\253\245/\347\254\224\350\256\260/22.11.20DOM.md"
new file mode 100644
index 0000000..4129317
--- /dev/null
+++ "b/10\351\231\210\346\230\212\347\253\245/\347\254\224\350\256\260/22.11.20DOM.md"
@@ -0,0 +1,66 @@
+```javascript
+<!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>
+
+    </style>
+    <script>
+        // querySelector
+        querySelector("#XXX") // id
+        querySelector(".XXX") //Class
+        querySelector("XXX") //<XXX>
+        document.querySelectorAll
+        //添加节点
+        function add() {
+            var div = document.querySelector("#div01");
+            var span = document.createElement("span");
+            var text = document.createTextNode("呼呼");
+            span.appendChild(text);
+            div.appendChild(span);
+        }
+        //删除节点
+        function del() {
+            var span = document.querySelector("#div01 span")
+            var div = document.querySelector("#div01");
+            div.remove(span);
+        }
+        //替换节点
+        function charge() {
+            var span = document.querySelector("#div01 span")
+            var div = document.querySelector("#div01");
+            var div1 = document.createElement("div")
+            div.replaceChild(div1, span);
+        }
+        //克隆节点
+        function clone() {
+            var span = document.querySelector("#div01 span");
+
+            var div = document.querySelector("#div01");
+            // var newSpan = span.cloneNode(false); //默认值 false，表示浅拷贝，只拷贝标签，不拷贝内容;
+            var newSpan = span.cloneNode(true); //拷贝标签和内容
+            div.appendChild(newSpan);
+        }
+
+
+    </script>
+</head>
+
+<body>
+    <button id="but01" onclick="add()" >添加节点</button>
+    <button id="but02" onclick="del()">删除节点</button>
+    <button id="but03" onclick="charge()">替换节点</button>
+    <button id="but04" onclick="clone()">克隆节点</button>
+    <div id="div01">
+        <span>123</span>
+    </div>
+</body>
+
+</html>
+```
+
-- 
Gitee

