Home Explore Help
Sign In
lovecoding
/
web0331
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:dom

e 2 weeks ago
parent
03442a27fc
commit
9af5d05314
4 changed files with 197 additions and 0 deletions
Split View Show Diff Stats
  1. 58 0
      3.js初级/DOM/15.节点操作.html
  2. 72 0
      3.js初级/DOM/16.事件冒泡.html
  3. 20 0
      3.js初级/DOM/17.默认事件.html
  4. 47 0
      3.js初级/DOM/18.事件源.html

+ 58 - 0
3.js初级/DOM/15.节点操作.html
View File 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div class="first">
 
+            <p>我是第一个盒子</p>
 
+        </div>
 
+        <ul class="list">
 
+            <li>你好1</li>
 
+            <li>你好2</li>
 
+            <li>你好3</li>
 
+            <li>你好4</li>
 
+            <li>你好5</li>
 
+        </ul>
 
+    </div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        var first = document.querySelector(".first");
 
+        var list = document.querySelector(".list")
 
+        console.log(box.children);
 
+        console.log(box.childNodes)
 
+        box.childNodes[0].innerText = '你好'
 
+        // box.childNodes[1].innerText = '我好'
 
+        console.log(box.childNodes)
 
+        // 创建节点
 
+        var news = document.createElement("h1");
 
+        console.log(news)
 
+        news.innerText = '我才是第一个'
 
+        console.log(news)
 
+        // 将新节点插入到第一个前面
 
+        box.insertBefore(news,first)
 
+        // 创建一个无序列表 将列表放入到页面上
 
+        var uls = document.createElement("ul"); 
+        var li1 = document.createElement("li"); 
+        var li2 = document.createElement("li"); 
+        li1.innerHTML='第一个'
 
+        li2.innerText='第二个'
 
+        // 添加节点
 
+        uls.appendChild(li1);
 
+        uls.appendChild(li2);
 
+        console.log(uls)
 
+        box.appendChild(uls)
 
+        // 删除节点
 
+        box.removeChild(list)
 
+        // 替换节点
 
+        var other = document.createElement("h2")
 
+        other.innerText = '这是最后的'
 
+        box.replaceChild(other,uls)
 
+        // 删除全部节点
 
+        box.remove()
 
+    </script>
 
+</body>
 
+</html>

+ 72 - 0
3.js初级/DOM/16.事件冒泡.html
View File 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box1 {
 
+            width: 700px;
 
+            height: 700px;
 
+            background: #f00;
 
+        }
 
+        #box2 {
 
+            width: 350px;
 
+            height: 350px;
 
+            background: #ff0;
 
+        }
 
+        #box3 {
 
+            width: 175px;
 
+            height: 175px;
 
+            background: #0f0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        事件三个阶段：
 
+            事件捕获：由外向内
 
+            目标阶段
 
+            事件冒泡:由内向外
 
+    -->
 
+            <div id="box1">
 
+                <div id="box2">
 
+                    <div id="box3"></div>
 
+                </div>
 
+            </div>
 
+            <script>
 
+
 
+                var box1 = document.getElementById("box1")
 
+                var box2 = document.getElementById("box2")
 
+                var box3 = document.getElementById("box3")
 
+                // box1.onclick = function() {
 
+                //     console.log("1")
 
+                // }
 
+                // box2.onclick = function(event) {
 
+                //     console.log("2");
 
+                //     // 阻止事件冒泡
 
+                //     event.stopPropagation();
 
+                // }
 
+                // box3.onclick = function(event) {
 
+                //     console.log("3")
 
+                //     // 阻止事件冒泡
 
+                //     event.cancelBubble = true;
 
+                // }
 
+                /**
 
+                 * 监听事件
 
+                 * xxx.addEventListener('mousemove',function() {xxxx},true/false)
 
+                 * true 捕获
 
+                 * false 冒泡
 
+                */
 
+               box1.addEventListener('click',function() {
 
+                console.log(1);
 
+               },false)
 
+               box2.addEventListener('click',function() {
 
+                console.log(2);
 
+               },false)
 
+               box3.addEventListener('click',function() {
 
+                console.log(3);
 
+               },false)
 
+            </script>
 
+</body>
 
+</html>

+ 20 - 0
3.js初级/DOM/17.默认事件.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <a href="http://www.baidu.com">点击</a>
 
+    <script>
 
+        var a = document.querySelector("a");
 
+        a.onclick = function(event) {
 
+            alert("你好")
 
+            // event.preventDefault();
 
+            // IE老版本
 
+            event.returnValue = false;
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 47 - 0
3.js初级/DOM/18.事件源.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box1 {
 
+            width: 700px;
 
+            height: 700px;
 
+            background: #f00;
 
+        }
 
+        #box2 {
 
+            width: 350px;
 
+            height: 350px;
 
+            background: #ff0;
 
+        }
 
+        #box3 {
 
+            width: 175px;
 
+            height: 175px;
 
+            background: #0f0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2">eee</div>
 
+        <input type="text">
 
+    </div>
 
+    <script>
 
+        var box1 = document.getElementById("box1")
 
+        var box2 = document.getElementById("box2")
 
+        var inp = document.querySelector("input")
 
+        box1.onclick = function(event) {
 
+            console.log(event);
 
+        }
 
+        box2.onclick = function(event) {
 
+            console.log(event.target);
 
+        }
 
+
 
+        inp.onkeydown = function(event) {
 
+            console.log(event.target.value);
 
+        }
 
+
 
+    </script>
 
+</body>
 
+</html>