|
@@ -0,0 +1,67 @@
|
|
|
|
|
+<!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>
|
|
|
|
|
+ .box span{
|
|
|
|
|
+ color: red;
|
|
|
|
|
+ }
|
|
|
|
|
+ .box1{
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ height: 100px;
|
|
|
|
|
+ background-color: red;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+ <!-- <div class="box1"></div>
|
|
|
|
|
+ <div class="box1"></div> -->
|
|
|
|
|
+ <div class="box">
|
|
|
|
|
+ <span>hello</span>
|
|
|
|
|
+ <span id="span-one">你好</span>
|
|
|
|
|
+ <span>世界</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span>world</span>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ var oBox = document.getElementsByClassName("box")[0];
|
|
|
|
|
+ // var firstSapn = document.getElementsByClassName("box")[0];
|
|
|
|
|
+ var spanOne = document.getElementById("span-one");
|
|
|
|
|
+ // 通过选择器选中内部子元素
|
|
|
|
|
+ // firstSapn = firstSapn.getElementsByTagName("span")[0];
|
|
|
|
|
+ // 通过节点获取子元素
|
|
|
|
|
+ // firstSapn = firstSapn.firstChild;
|
|
|
|
|
+ // 获取元素的子节点包含文本节点
|
|
|
|
|
+ // firstSapn = firstSapn.childNodes;
|
|
|
|
|
+ // 获取元素的子节点不包含文本节点 只有元素节点
|
|
|
|
|
+ // firstSapn = firstSapn.children;
|
|
|
|
|
+ // 获取元素的父节点
|
|
|
|
|
+ // var oParent = spanOne.parentNode;
|
|
|
|
|
+
|
|
|
|
|
+ // 获取元素的兄弟节点 获取前一个兄弟且是元素节点
|
|
|
|
|
+ // var preElement = spanOne.previousElementSibling;
|
|
|
|
|
+ // 获取元素的兄弟节点 获取前一个兄弟且饱含文本节点
|
|
|
|
|
+ // var preElement = spanOne.previousSibling;
|
|
|
|
|
+ // 获取元素的兄弟节点 获取后一个兄弟且是元素节点
|
|
|
|
|
+ // var nextElement = spanOne.nextElementSibling;
|
|
|
|
|
+ // 获取元素的兄弟节点 获取后一个兄弟且包含文本节点
|
|
|
|
|
+ // var nextElement = spanOne.nextSibling;
|
|
|
|
|
+ // console.log(nextElement);
|
|
|
|
|
+
|
|
|
|
|
+ // 创建节点
|
|
|
|
|
+ var oDiv = document.createElement("div");
|
|
|
|
|
+ oDiv.innerText = "四福科技";
|
|
|
|
|
+ oDiv.style.color = "red";
|
|
|
|
|
+
|
|
|
|
|
+ // 插入节点
|
|
|
|
|
+ // 向指定元素的末尾添加子元素
|
|
|
|
|
+ // oBox.appendChild(oDiv);
|
|
|
|
|
+ // 向指定元素的前面添加元素 两个参数第一个是添加的元素 第二个是添加到哪个元素的前面
|
|
|
|
|
+ oBox.insertBefore(oDiv,spanOne);
|
|
|
|
|
+
|
|
|
|
|
+ // console.log(oDiv);
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
