|
|
@@ -0,0 +1,60 @@
|
|
|
+<!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>
|
|
|
+ <!-- <script src="../js/2.节点遍历.js"></script> -->
|
|
|
+ <p id="main">这是一个p标签</p>
|
|
|
+ <div class="box">这是一个盒子</div>
|
|
|
+ <h2>
|
|
|
+ 我的你的
|
|
|
+ <br />
|
|
|
+ 你的我的
|
|
|
+ <br />
|
|
|
+ 1111
|
|
|
+ </h2>
|
|
|
+ <h3>呜呜呜</h3>
|
|
|
+ <ul id="list">
|
|
|
+ <li>1</li>
|
|
|
+ <li>2</li>
|
|
|
+ <li>3</li>
|
|
|
+ <li>4</li>
|
|
|
+ </ul>
|
|
|
+ <script>
|
|
|
+ var main = document.getElementById("main");
|
|
|
+ var box = document.querySelector(".box");
|
|
|
+ var h2 = document.querySelector("h2");
|
|
|
+ var list = document.getElementById("list");
|
|
|
+ console.log(box.nextSibling,'1')
|
|
|
+ // firstChild 第一个子节点
|
|
|
+ // lastChild 最后一个子节点
|
|
|
+ // previousSibling 上一个兄弟节点名称
|
|
|
+ // nextSibling 下一个兄弟节点名称
|
|
|
+ // nextElementSibling 下一个元素节点
|
|
|
+ // previousElementSibling 上一个元素节点 如果该节点为第一个节点 则获取值为null
|
|
|
+ // lastElementChild
|
|
|
+ // firstElementChild
|
|
|
+
|
|
|
+ //遍历
|
|
|
+ function fn2(ele) {
|
|
|
+ do {
|
|
|
+ ele = ele.previousSibling;
|
|
|
+ } while (ele.nodeType != 1);
|
|
|
+ return ele;
|
|
|
+ }
|
|
|
+
|
|
|
+ function fn1(ele) {
|
|
|
+ var a1 = ele.lastChild;
|
|
|
+ if (a1.nodeType != 1) {
|
|
|
+ return ele = fn2(a1);
|
|
|
+ } else {
|
|
|
+ return ele;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(fn1(list));
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e
