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

dom

e 1 year ago
parent
b026d2068e
commit
801e9a7338
4 changed files with 215 additions and 0 deletions
Split View Show Diff Stats
  1. 57 0
      js/js初阶/DOM/12.节点遍历.html
  2. 57 0
      js/js初阶/DOM/13.垂直导航.html
  3. 44 0
      js/js初阶/DOM/14.添加元素.html
  4. 57 0
      js/js初阶/DOM/15.事件冒泡.html

+ 57 - 0
js/js初阶/DOM/12.节点遍历.html
View File 

@@ -0,0 +1,57 @@
 
+<!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="box1">1111</div>
 
+    <p id="p1">222</p>
 
+    <ul id="list">
 
+      <li class="aaa">
 
+        <p>aaa</p>
 
+        <a href="">哈哈</a>
 
+      </li>
 
+      <li>ddd</li>
 
+      <li>ccc</li>
 
+      <li>bbb</li>
 
+    </ul>
 
+    <script>
 
+      var box = document.getElementById("box1");
 
+      var p1 = document.getElementById("p1");
 
+      var uls = document.querySelector("#list");
 
+      var lis = document.querySelectorAll("ul li");
 
+      // console.log(box,p1,uls,lis);
 
+      console.log(uls);
 
+      console.log(lis[0].nextElementSibling);
 
+      /**
 
+       * 标签 nodeName 标签名称
 
+       * 属性 nodeName 属性名称
 
+       * nodeType 标签 1
 
+       * nodeValue 节点值
 
+       * firstChild 第一个子节点
 
+       * firstElementChild 第一个子元素
 
+       * lastChild 最后一个子节点
 
+       * lastElementChild 最后一个子元素
 
+       * previousElementSibling 上一个元素
 
+       * previousSibling 上一个节点
 
+       * nextElementSibling 下一个元素
 
+       * nextSibling 下一个节点
 
+       */
 
+      function loop(elem) {
 
+        // console.log(elem.length)
 
+        // for(var i=0;i<elem.length;i++) {
 
+        //     elem = elem[i].firstElementChild;
 
+        //     console.log(elem,'循环')
 
+        // }
 
+        elem = elem.firstElementChild;
 
+        if(elem.nodeType == 1) {
 
+            console.log("当前传入的是标签")
 
+        }
 
+        return elem;
 
+      }
 
+      console.log(loop(uls),'22');
 
+    </script>
 
+  </body>
 
+</html>

+ 57 - 0
js/js初阶/DOM/13.垂直导航.html
View File 

@@ -0,0 +1,57 @@
 
+<!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>
 
+        h2 {
 
+            padding: 30px 40px;
 
+            color: #ff0;
 
+            background: #f00;
 
+            margin-top: 30px;
 
+        }
 
+        ul {
 
+            display: none;
 
+        }
 
+        ol {
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h2>管理区</h2>
 
+    <ul>
 
+        <li>aaaa</li>
 
+        <li>aaaa</li>
 
+        <li>aaaa</li>
 
+    </ul>
 
+    <h2>交流区</h2>
 
+    <ol>
 
+        <li>bbb</li>
 
+        <li>bbb</li>
 
+        <li>bbb</li>
 
+    </ol>
 
+    <script>
 
+        var h2 = document.querySelectorAll("h2");
 
+        console.log(h2)
 
+        for(var i =0;i<h2.length;i++){
 
+            h2[i].onclick = function() {
 
+               var ul1 = next(this);
 
+               console.log(ul1);
 
+               if(ul1.style.display == 'block') {
 
+                ul1.style.display = 'none';
 
+               } else {
 
+                ul1.style.display = 'block';
 
+               }
 
+            }
 
+        }
 
+        function next(ele) {
 
+            do {
 
+                ele = ele.nextElementSibling;
 
+            }while(ele.nodeType != 1)
 
+            return ele;
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
js/js初阶/DOM/14.添加元素.html
View File 

@@ -0,0 +1,44 @@
 
+<!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">
 
+        <h1>事件方法</h1>
 
+        
+    </div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        // 1.创建元素
 
+        var h3 = document.createElement("h3");
 
+        h3.innerText = '哈哈哈'
 
+        var p = document.createElement("p");
 
+        p.innerText = '这是一个p标签'
 
+        var ul = document.createElement("ul");
 
+        var li = document.createElement("li");
 
+        var li2 = document.createElement("li");
 
+        var li3 = document.createElement("li");
 
+        li.innerText = '1';
 
+        li2.innerText = '12';
 
+        li3.innerText = '13';
 
+        ul.appendChild(li);
 
+        ul.appendChild(li2);
 
+        ul.appendChild(li3);
 
+        // 2.添加元素
 
+        // box.appendChild(p);
 
+        box.appendChild(ul);
 
+        // 3.替换元素 xxx.replaceChild(新值,旧值)
 
+        // box.replaceChild(p,ul)
 
+        // 4.删除元素 xxx.removeChild(旧值)
 
+        // box.removeChild(p)
 
+        // 5.删除所有元素
 
+        // box.remove()
 
+        // 6.插入元素 insertBefore(被插入的值，插入的旧值)
 
+        box.insertBefore(h3,ul)
 
+        console.log(p)
 
+    </script>
 
+</body>
 
+</html>

+ 57 - 0
js/js初阶/DOM/15.事件冒泡.html
View File 

@@ -0,0 +1,57 @@
 
+<!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: 500px;
 
+            height: 500px;
 
+            background: #00f;
 
+        }
 
+        #box2{
 
+            width: 340px;
 
+            height: 340px;
 
+            background: #0f0;
 
+        }
 
+        #box3{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+        }
 
+    </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() {
 
+            alert("111")
 
+        }
 
+        box2.onclick = function(event) {
 
+            alert("222")
 
+            // 解决事件冒泡
 
+            event.stopPropagation();
 
+            
+        }
 
+        box3.onclick = function(event) {
 
+            alert("333")
 
+            // IE解决事件冒泡
 
+            event.cancelBubble = true;
 
+        }
 
+        /***
 
+         * 事件三个阶段 ：
 
+         * 捕获 由外到内
 
+         * 目标
 
+         * 冒泡 由内到外
 
+         */
 
+    </script>
 
+</body>
 
+</html>