Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP28
9
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 1 жил өмнө
parent
9fdeab4f9c
commit
bcf50886a9
2 өөрчлөгдсөн 138 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 69 0
      Dom/10_节点遍历.html
  2. 69 0
      Dom/11_垂直导航.html

+ 69 - 0
Dom/10_节点遍历.html
Файл харах 

@@ -0,0 +1,69 @@
 
+<!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>
 
+
 
+<body>
 
+  <div id="div1">111111111</div>
 
+  <p id="p1">22222222</p>
 
+  <ul id="ul1">
 
+    <li id="li1">1</li>
 
+    <li>2</li>
 
+    <li>3</li>
 
+  </ul>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var p1 = document.getElementById('p1')
 
+    var ul1 = document.getElementById('ul1')
 
+    /* console.log(div1)
 
+    console.log(div1.nodeType)//节点类型
 
+    console.log(div1.nextSibling)// 下一个节点
 
+    console.log(div1.previousSibling)//上一个节点 */
 
+    /*
 
+    document是没有nodeValue的：null
 
+    元素节点是没有nodeValue的：null
 
+    属性节点id的nodeValue：d1
 
+    内容节点的nodeValue：hello HTML DOM
 
+    */
 
+
 
+    // console.log(div1.nextElementSibling)//下一个元素节点
 
+    // console.log(div1.previousElementSibling)//上一个元素节点
 
+
 
+    // console.log(div1.nodeName)//节点名称
 
+    // console.log(p1.nodeName)
 
+    /* 
+    元素节点的 nodeName 与标签名相同
 
+    属性节点的 nodeName 与属性名相同
 
+    文本节点的 nodeName #text
 
+    文档节点的 nodeName #document
 
+    */
 
+
 
+    function next(elem){
 
+      do{
 
+        elem = elem.nextSibling
 
+      } while(elem.nodeType != 1)
 
+      return elem
 
+    }
 
+    console.log(next(p1))
 
+
 
+    // console.log(ul1.firstChild)
 
+    // console.log(ul1.lastChild)
 
+    // console.log(ul1.firstElementChild)
 
+
 
+    function first(elem){
 
+      elem = elem.firstChild
 
+      if(elem.nodeType != 1){
 
+        elem = next(elem)
 
+      } 
+      return elem
 
+    }
 
+    console.log(first(ul1))
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 69 - 0
Dom/11_垂直导航.html
Файл харах 

@@ -0,0 +1,69 @@
 
+<!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>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    ul {
 
+      list-style: none;
 
+    }
 
+
 
+    h2 {
 
+      width: 300px;
 
+      height: 50px;
 
+      background: black;
 
+      color: white;
 
+    }
 
+    ul{
 
+      display: none;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="container">
 
+    <h2>管理区</h2>
 
+    <ul>
 
+      <li>111</li>
 
+      <li>111</li>
 
+      <li>111</li>
 
+    </ul>
 
+    <h2>交流区</h2>
 
+    <ul>
 
+      <li>456</li>
 
+      <li>456</li>
 
+      <li>456</li>
 
+    </ul>
 
+  </div>
 
+  <script>
 
+    var h2 = document.getElementsByTagName('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(elem){
 
+      do{
 
+        elem = elem.nextSibling
 
+      } while(elem.nodeType != 1)
 
+      return elem
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>