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

DOM

e 1 year ago
parent
331f125b3c
commit
e4e10aa0f7
3 changed files with 124 additions and 3 deletions
Unified View Show Diff Stats
  1. 4 3
      JS初级/DOM/16.节点遍历.html
  2. 61 0
      JS初级/DOM/17.垂直导航.html
  3. 59 0
      JS初级/DOM/18.节点操作.html

+ 4 - 3
JS初级/DOM/16.节点遍历.html
View File 

@@ -34,11 +34,12 @@
 
       var box = document.querySelector(".box")
 
       var box = document.querySelector(".box")
 
       var h2 = document.querySelector("h2");
 
       var h2 = document.querySelector("h2");
 
       var list = document.querySelector("#list");
 
       var list = document.querySelector("#list");
 
+      // console.log(list.nextElementSibling)
 
       // console.log(main.previousSibling);
 
       // console.log(main.previousSibling);
 
       // console.log(list.firstElementChild)
 
       // console.log(list.firstElementChild)
 
       // console.log(list.lastChild.previousElementSibling.innerHTML)
 
       // console.log(list.lastChild.previousElementSibling.innerHTML)
 
-      console.log(list.firstChild.nextSibling);
 
-      console.log(list.firstElementChild)
 
+      // console.log(list.firstChild.nextSibling);
 
+      // console.log(list.firstElementChild)
 
       /*
 
       /*
 
         list.firstChild #text
 
         list.firstChild #text
 
         list.firstChild.nextElementSibling li => 1
 
         list.firstChild.nextElementSibling li => 1
 
@@ -48,4 +49,4 @@
 
       // console.log(list.firstChild.nextElementSibling.nextSibling.nextElementSibling);
 
       // console.log(list.firstChild.nextElementSibling.nextSibling.nextElementSibling);
 
     </script>
 
     </script>
 
   </body>
 
   </body>
 
-</html>
 
+</html>

+ 61 - 0
JS初级/DOM/17.垂直导航.html
View File 

@@ -0,0 +1,61 @@
 
+<!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>
 
+         * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+         }
 
+         h2 {
 
+            width: 200px;
 
+            height: 80px;
 
+            text-align: center;
 
+            line-height: 80px;
 
+            background: purple;
 
+            color: #fff;
 
+            margin-top: 15px;
 
+         }
 
+         ul {
 
+            display: none;
 
+         }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <h2>管理区</h2>
 
+        <ul>
 
+            <li>我的项目1</li>
 
+            <li>我的项目2</li>
 
+            <li>我的项目3</li>
 
+            <li>我的项目4</li>
 
+        </ul>
 
+        <h2>提交区</h2>
 
+        <ul>
 
+            <li>我的内容1</li>
 
+            <li>我的内容2</li>
 
+            <li>我的内容3</li>
 
+            <li>我的内容4</li>
 
+        </ul>
 
+    </div>
 
+    <script>
 
+        var h2 = document.querySelectorAll("h2");
 
+        console.log(this); // this 在全局 指向windows
 
+        for(var i=0;i<h2.length;i++) {
 
+            h2[i].onclick = function() {
 
+                // this在点击事件与类似事件 执行当前对象 
+                console.log(this); // h2
 
+                var uls = this.nextElementSibling;
 
+                if(uls.style.display == 'none') {
 
+                    uls.style.display = 'block';
 
+                } else {
 
+                    uls.style.display = 'none';
 
+                }
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 59 - 0
JS初级/DOM/18.节点操作.html
View File 

@@ -0,0 +1,59 @@
 
+<!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">
 
+        <p class="first">
 
+            <span>我是第一</span>
 
+        </p>
 
+        <ol id="list">
 
+            <li>内容1</li>
 
+            <li>内容2</li>
 
+            <li>内容3</li>
 
+            <li>内容4</li>
 
+            <li>内容5</li>
 
+        </ol>
 
+    </div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        var first = document.querySelector(".first");
 
+        var list = document.getElementById("list");
 
+        console.log(first)
 
+        // childNodes 子节点
 
+        console.log(box.childNodes[1].innerHTML);
 
+        // 创建节点 document.createElement("想要创建的标签")
 
+        var news = document.createElement("h3");
 
+        news.innerText = '这是一个h3标签';
 
+        console.log(news);
 
+        // 插入 insertBefore(插入的内容,插入位置)
 
+        // box.insertBefore(news,first)
 
+        box.insertBefore(news,list);
 
+        var a = document.createElement("span")
 
+        a.innerHTML = 'aaaa';
 
+        first.insertBefore(a,first[0])
 
+        // 需求：创建一个无序列表 并将它显示在页面上
 
+        // 添加节点 xxx.appendChild(xxx)
 
+        var uls = document.createElement("ul");
 
+        var lis = document.createElement("li");
 
+        var li1 = document.createElement("li");
 
+        li1.innerText = '第二个';
 
+        lis.innerText = '第一个';
 
+        uls.appendChild(lis);
 
+        uls.insertBefore(li1,lis);
 
+        console.log(uls);
 
+        box.appendChild(uls);
 
+        // 删除节点 xxx.removeChild(要删除的内容)
 
+        box.removeChild(uls);
 
+        // 替换节点 xxx.replaceChild(新节点,旧节点)
 
+        var other = document.createElement("h1");
 
+        other.innerText = '新的标题';
 
+        // 删除全部 remove xxx.remove()
 
+        box.replaceChild(other,news)
 
+        box.remove();
 
+    </script>
 
+</body>
 
+</html>