From ffe925c502f9f528be5f7e3d798bd6bcddd70c91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BD=97=E6=AD=A4=E4=B8=9C?= <3352403143@qq.com>
Date: Mon, 21 Nov 2022 11:40:12 +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

---
 .../2022.11.18/2022_11_18 Dom.html"           | 41 ++++++++++
 ...22_11_18_DOM\347\273\203\344\271\240.html" | 37 +++++++++
 .../2022.11.18/DOM.md"                        | 79 +++++++++++++++++++
 3 files changed, 157 insertions(+)
 create mode 100644 "33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18 Dom.html"
 create mode 100644 "33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18_DOM\347\273\203\344\271\240.html"
 create mode 100644 "33\347\275\227\346\255\244\344\270\234/2022.11.18/DOM.md"
diff --git "a/33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18 Dom.html" "b/33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18 Dom.html"
new file mode 100644
index 0000000..287f14c
--- /dev/null
+++ "b/33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18 Dom.html"	
@@ -0,0 +1,41 @@
+<!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>
+<style>
+#huhu{
+    width: 500px;
+            height: 100px;
+            border: 2px solid rosybrown;
+}
+</style>
+<body>
+    <button onclick="fn()">肥龙神</button>
+    <div id="huhu">
+
+    </div>
+    <script>
+        var a=0
+        function fn() {
+        if (a==0) {
+            a++;
+            var hu=document.getElementById('huhu')
+            var newH2 = document.createElement('h2');
+            var txt = document.createTextNode('封校三天 快乐无边');
+            newH2.appendChild(txt);
+            hu.appendChild(newH2);
+        }else{
+            var hu=document.getElementById('huhu')
+            hu.innerText=''
+            a--;
+           
+        }
+       
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18_DOM\347\273\203\344\271\240.html" "b/33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18_DOM\347\273\203\344\271\240.html"
new file mode 100644
index 0000000..4df04e2
--- /dev/null
+++ "b/33\347\275\227\346\255\244\344\270\234/2022.11.18/2022_11_18_DOM\347\273\203\344\271\240.html"
@@ -0,0 +1,37 @@
+ <!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>
+    <input type="text" id="tt">&nbsp;
+    <button  onclick="fn()">复制</button>
+    <div id="box">
+            
+    </div>
+    <script >
+        function fn() {
+            var div=document.getElementById('box')
+            div.innerText='';
+            var txt=document.getElementById('tt').value;
+            var newh2=document.createElement('h2')
+            var dd=document.createTextNode(txt);
+
+            newh2.appendChild(dd) 
+            div.appendChild(newh2)
+        }
+      
+      
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/33\347\275\227\346\255\244\344\270\234/2022.11.18/DOM.md" "b/33\347\275\227\346\255\244\344\270\234/2022.11.18/DOM.md"
new file mode 100644
index 0000000..cc194b3
--- /dev/null
+++ "b/33\347\275\227\346\255\244\344\270\234/2022.11.18/DOM.md"
@@ -0,0 +1,79 @@
+# DOM
+
+###### 节点
+
+1.节点类型：元素节点、文本节点、属性节点
+
+2.获取元素
+
+```js
+根据id获取HTML元素：
+document.getElementById("id名")
+
+根据标签名获取HTML元素：
+document.getElementsByTagName("标签名");
+
+根据类名获取HTML元素：(返回HTMLCollection 数组)
+document.getElementsByClassName("类名");
+
+根据name属性获取元素对象: NodeList(伪数组)：只能获取下标和长度
+
+console.log(document.getElementsByName('username'));
+```
+
+3.节点的增删改
+
+例子：
+
+```
+<div id="box">
+        <h2 id="h2">我是将被删除的h2</h2>  <!--替换的h3 -->
+    </div>
+    <script>
+        var div = document.querySelector('#box');
+        
+        //创建元素节点
+        var newH2 = document.createElement('h2');
+        var txt = document.createTextNode('我是新添加的H2');
+        newH2.appendChild(txt);
+        // 添加子元素节点
+        div.appendChild(newH2);
+
+        //删除子节点:removeChild(元素对象:h2)
+        // var h2 = document.getElementById('h2');
+        // div.removeChild(h2);
+
+        
+        // var newH3 = document.createElement('h3');
+        // var txt = document.createTextNode('替换的h3');
+        // var h2 = document.getElementById('h2');
+        // newH3.appendChild(txt);
+        // //改:replaceChild
+        // // div.replaceChild(newH3,h2);
+        // //在...之前插入一个节点
+        // div.insertBefore(newH3,h2);
+
+
+    </script>
+```
+
+添加新节点：
+
+```js
+ appendChild()：添加新元素到尾部。
+
+insertBefore()：添加新元素到该元素之前。
+```
+
+删除节点：
+
+```js
+删除HTML节点：removeChild()
+```
+
+替换：
+
+```js
+replaceChild()
+```
+
-- 
Gitee

