diff --git "a/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022_11_18_DOM.html" "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022_11_18_DOM.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c5017bae048449188886fa9a6b60dff6098f90c8
--- /dev/null
+++ "b/08\345\273\226\346\237\217\346\210\220/\344\275\234\344\270\232/2022_11_18_DOM.html"
@@ -0,0 +1,61 @@
+<!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: 5px solid pink;
+        }
+        #yy{
+            width: 500px;
+            height: 100px;
+            border: 5px solid pink;
+        }
+    </style>
+</head>
+<body>
+    <input type="text" id="username">&nbsp;
+    <button id="btn">复制</button>
+    <div id="box">     
+    </div> 
+    <!-- //2 有个button,有个h2(封校三天 快乐无边),当点击button时会显示文字，再次点击会文字会消失。 -->
+    <button id="xx">隐藏</button>
+    <div id="yy">     
+    </div> 
+</body>
+<script>
+    var yc = document.getElementById('xx');
+    var index=0;
+     xx.onclick= ()=> {
+        if (index==0) {
+        var yy=document.getElementById('yy');
+        var newH2 = document.createElement('h2');
+        var txt = document.createTextNode('封校三天 快乐无边');
+       newH2.appendChild(txt)
+        yy.appendChild(newH2);
+        index++;
+        }
+        else{
+         var div=   document.getElementById('yy');
+            div.innerText=''
+               index--;
+        }
+        
+       
+    }
+
+
+
+    var username = document.querySelector('#username');
+    var btn = document.querySelector('#btn');
+    btn.onclick = ()=>{
+        document.getElementById('box').innerHTML = '<h2>'+username.value+'</h2>';
+        username.value = '';
+    }
+</script>
+</html>
diff --git "a/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-18 DOM.txt" "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-18 DOM.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..29b4d1d05dc9f4cadeec77d50ee5e86abdd33480
--- /dev/null
+++ "b/08\345\273\226\346\237\217\346\210\220/\347\254\224\350\256\260/2022-11-18 DOM.txt"	
@@ -0,0 +1,36 @@
+              DOM(文档对象模型)
+DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类的对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
+
+DOM常用API    
+(应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。)
+
+DOM 树状结构
+DOM 就是用来改变网页 HTML 的内容用的,在浏览器标签中当前载入的文档用一个 document 对象来表示。这个对象是一个树状结构,我们把每个 HTML 元素对应在树中的入口称为节点
+
+        元素节点: 	
+一个元素，存在于DOM中。
+        根节点: 	
+树中顶层节点，在HTML的情况下，总是一个HTML节点（其他标记词汇，如SVG和定制XML将有不同的根元素）
+        子节点: 	
+直接位于另一个节点内的节点。例如上面例子中，IMG是SECTION的子节点。
+         后代节点:	 
+位于另一个节点内任意位置的节点。例如 上面例子中，IMG是SECTION的子节点，也是一个后代节点。IMG不是BODY的子节点，因为它在树中低了BODY两级，但它是BODY的后代之一。
+          父节点: 	
+里面有另一个节点的节点。例如上面的例子中BODY是SECTION的父节点。
+         兄弟节点: 	
+DOM树中位于同一等级的节点。例如上面例子中，IMG和P是兄弟。
+         文本节点: 	
+包含文字串的节点
+
+
+基本的 DOM 操作
+在 HTML 当中 </body> 之前（就是 <body></body> 结尾的地方）
+加入这样一行:
+<script ></script>
+
+修改元素
+要想修改一个元素，操作 document 对象，使用 querySelector() 方法选中你想要的元素。这个方法使用一个 CSS 选择器来筛选元素。
+比如我们使用这个代码可以选中页面中第一个 a 元素，并且创建一个引用：
+let link = Document.querySelector('a');
+
+如果想对多个元素进行匹配和操作，你可以使用 document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个数组中，你就可以用一个 for 循环进行操作了。
