|
|
@@ -0,0 +1,45 @@
|
|
|
+<!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="box1">
|
|
|
+ <div class="box2">hello</div>
|
|
|
+ <div class="box3">world</div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ // 获取子节点
|
|
|
+ var oBox1 = document.getElementsByClassName("box1")[0];
|
|
|
+ // childNodes 获取到的节点列表（类数组）包括文本节点 还有 元素节点
|
|
|
+ var childNode = oBox1.childNodes;
|
|
|
+ // children 获取到的是一个html的集合（类数组）仅包含元素节点
|
|
|
+ var chilren = oBox1.children;
|
|
|
+ // console.log(chilren);
|
|
|
+
|
|
|
+ var oBox2 = document.getElementsByClassName("box2")[0];
|
|
|
+ // parentElement 获取到的是父元素节点 单个元素
|
|
|
+ var parent = oBox2.parentElement;
|
|
|
+ // console.log(parent)
|
|
|
+
|
|
|
+ // nextSibling 获取后边的兄弟节点 包含文本节点 单个节点不是集合
|
|
|
+ var nextSibling = oBox2.nextSibling;
|
|
|
+ // nextElementSibling 获取后边的兄弟节点 仅是元素节点 单个节点不是集合
|
|
|
+ var nextElement = oBox2.nextElementSibling;
|
|
|
+ // console.log(nextSibling,nextElement);
|
|
|
+
|
|
|
+ var oBox3 = document.getElementsByClassName("box3")[0];
|
|
|
+ // previousSibling 获取到前一个兄弟节点 包括文本节点 单个节点不是集合
|
|
|
+ var prevSibling = oBox3.previousSibling;
|
|
|
+ // previousElementSibling 获取前一个兄弟节点 不包括文本节点 单个节点不是集合
|
|
|
+ var PrevElement = oBox3.previousElementSibling;
|
|
|
+ console.log(PrevElement);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
