Home Explore Help
Sign In
lovecoding
/
web0715
10
0
Fork 0
Files Issues 0 Wiki
Browse Source

add

fengchuanyu 9 months ago
parent
10a6099191
commit
6179151d93
6 changed files with 178 additions and 2 deletions
Split View Show Diff Stats
  1. 40 0
      4_DOM&BOM/15_DOM获取子节点.html
  2. 20 0
      4_DOM&BOM/16_DOM获取父节点.html
  3. 35 0
      4_DOM&BOM/17_DOM获取兄弟节点.html
  4. 26 0
      4_DOM&BOM/18_DOM创建新节点.html
  5. 32 0
      4_DOM&BOM/19_DOM插入节点.html
  6. 25 2
      4_DOM&BOM/练习11_放大镜效果.html

+ 40 - 0
4_DOM&BOM/15_DOM获取子节点.html
View File 

@@ -0,0 +1,40 @@
 
+<!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>
 
+    <ul class="ul1">
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+    </ul>
 
+    <ul class="ul2">
 
+        <li>a</li>
 
+        <li>b</li>
 
+    </ul>
 
+    <div class="box">
 
+        <span>hello</span>
 
+        world
 
+        <p>你好</p>
 
+    </div>
 
+    <script>
 
+        var aUl1 = document.getElementsByClassName("ul1")[0];
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        // var aLi1 = aUl1.getElementsByTagName("li");
 
+        // console.log(aLi1)
 
+        // childNodes 可以获取当前元素的子节点 节点包含字符比如回车
 
+        console.log(aUl1.childNodes);
 
+        console.log(oBox.childNodes);
 
+
 
+        // children 获取当前元素的子节点但仅包含元素节点不包含文本节点
 
+        console.log(aUl1.children);
 
+        console.log(aUl1.children[2]);
 
+
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 20 - 0
4_DOM&BOM/16_DOM获取父节点.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>
 
+    <div class="box">
 
+        <div class="box1">
 
+            <div class="box2"></div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        var box1 = document.getElementsByClassName("box1")[0];
 
+
 
+        console.log(box1.parentElement)
 
+    </script>
 
+</body>
 
+</html>

+ 35 - 0
4_DOM&BOM/17_DOM获取兄弟节点.html
View File 

@@ -0,0 +1,35 @@
 
+<!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>
 
+    <ul>
 
+        <li class="li1">1</li>
 
+        <li>2</li>
 
+        <li class="li3">3</li>
 
+        <li>4</li>
 
+        <li>5</li>
 
+        <li>6</li>
 
+    </ul>
 
+    <script>
 
+        var li1 = document.getElementsByClassName("li1")[0];
 
+        var li3 = document.getElementsByClassName("li3")[0];
 
+        // nextElementSibling 获取当前元素的下一个兄弟节点（元素节点）
 
+        console.log(li3.nextElementSibling);
 
+        //nextSibling 获取当前元素的下一个兄弟节点（包含文本节点）
 
+        console.log(li3.nextSibling);
 
+        // previousElementSibling 获取当前元素的上一个兄弟节点（元素节点）
 
+        console.log(li3.previousElementSibling);
 
+        // previousSibling获取当前元素的上一个兄弟节点（包含文本节点）
 
+        console.log(li3.previousSibling);
 
+
 
+
 
+
 
+        console.log(li1.previousElementSibling);
 
+    </script>
 
+
 
+</body>
 
+</html>

+ 26 - 0
4_DOM&BOM/18_DOM创建新节点.html
View File 

@@ -0,0 +1,26 @@
 
+<!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 class="box"></div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+
 
+        // oBox.innerHTML = "<h1>hello</h1>"
 
+
 
+        // createElement 创建新的元素 可以对当前元素任意操作
 
+        var oH1 = document.createElement("h1");
 
+        oH1.innerText = "你好世界";
 
+        oH1.style.color = "red";
 
+        oBox.appendChild(oH1);
 
+        oH1.onclick = function(){
 
+            console.log("hello");
 
+        }
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 32 - 0
4_DOM&BOM/19_DOM插入节点.html
View File 

@@ -0,0 +1,32 @@
 
+<!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>
 
+    <ul>
 
+        <li>1</li>
 
+        <li class="li2">2</li>
 
+
 
+        <li class="li3">3</li>
 
+        <li>4</li>
 
+    </ul>
 
+    <script>
 
+        var oLi = document.createElement("li");
 
+        var oUL = document.getElementsByTagName("ul")[0];
 
+        var li3 = document.getElementsByClassName("li3")[0];
 
+        var li2 = document.getElementsByClassName("li2")[0];
 
+        oLi.innerText = "hello";
 
+
 
+        // appendChild向当前对象内最后追加一个新的元素
 
+        // oUL.appendChild(oLi);
 
+        // insertBefore 向当前对象内插入新元素，他接收两个参数第一个是你要插入的元素，第二是个要在哪个元素前插入
 
+        // oUL.insertBefore(oLi,li3)
 
+
 
+        // oUL.insertBefore(li3,li2)
 
+        oUL.appendChild(li3);
 
+    </script>
 
+</body>
 
+</html>

+ 25 - 2
4_DOM&BOM/练习11_放大镜效果.html
View File 

@@ -29,6 +29,23 @@
 
             left: 0;
 
             opacity: 0.5;
 
         }
 
+        .big-img,.small-img{
 
+            float: left;
 
+            margin-right: 20px;
 
+        }
 
+        .big-img{
 
+            width: 400px;
 
+            height: 400px;
 
+            overflow: hidden;
 
+            position: relative;
 
+        }
 
+        .big-img img{
 
+            width: 800px;
 
+            height: 800px;
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
@@ -37,12 +54,14 @@
 
         <img src="./image/niu.png" alt="img">
 
         <div class="box"></div>
 
     </div>
 
-    <div class="big-img"></div>
 
+    <div class="big-img">
 
+        <img class="img-two" src="./image/niu.png" alt="img">
 
+    </div>
 
    </div> 
    <script>
 
     var smallImg = document.getElementsByClassName("small-img")[0];
 
     var oBox = document.getElementsByClassName("box")[0];
 
-   
+    var bigImg = document.getElementsByClassName("img-two")[0];
 
     smallImg.onmousemove = function(e){
 
         var _top = e.clientY-100;
 
         var _left = e.clientX-100;
 
@@ -66,6 +85,10 @@
 
 
         oBox.style.top = _top + "px";
 
         oBox.style.left = _left + "px";
 
+
 
+
 
+        bigImg.style.top = -2 * _top + "px";
 
+        bigImg.style.left = -2 * _left + "px";
 
     }
 
    </script>
 
 </body>