|
|
@@ -0,0 +1,55 @@
|
|
|
+<!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>
|
|
|
+ <p id="main">这是一个p标签</p>
|
|
|
+ <div id="box">这是一个盒子</div>
|
|
|
+ <h1>你好</h1>
|
|
|
+ <br />
|
|
|
+ <h3>我好</h3>
|
|
|
+ <hr />
|
|
|
+ <div class="demo">
|
|
|
+ <ul class="aa">
|
|
|
+ <li>2222</li>
|
|
|
+ <li>444</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <ol id="list">
|
|
|
+ <li>ooo</li>
|
|
|
+ <li>ooo</li>
|
|
|
+ <li>ooo</li>
|
|
|
+ <li>ooo</li>
|
|
|
+ <li>ooo</li>
|
|
|
+ </ol>
|
|
|
+ <script>
|
|
|
+ var main = document.getElementById("main");
|
|
|
+ var box = document.getElementById("box");
|
|
|
+ var h1 = document.querySelector("h1");
|
|
|
+ var h3 = document.querySelector("h3");
|
|
|
+ var ul = document.querySelector(".aa");
|
|
|
+ var list = document.querySelector("#list");
|
|
|
+ console.log(ul.nextElementSibling); //下一个元素节点
|
|
|
+ console.log(main.previousElementSibling); //上一个元素节点
|
|
|
+ console.log(ul.firstElementChild); //第一个子元素
|
|
|
+ console.log(ul.lastElementChild.nodeType); //最后一个子元素
|
|
|
+ console.log(ul.lastChild.nodeType);
|
|
|
+ console.log(ul.firstChild);
|
|
|
+ console.log(ul.firstChild.nextElementSibling.nextSibling.nextSibling);
|
|
|
+ console.log(ul.nodeType);
|
|
|
+ console.log(ul.innerHTML);
|
|
|
+ console.log(ul.innerText);
|
|
|
+ console.log(list.parentNode);
|
|
|
+ console.log(list.children);
|
|
|
+ console.log(list.childNodes);
|
|
|
+ // parentNode 父节点
|
|
|
+ // children 子元素
|
|
|
+ // childNodes 子节点
|
|
|
+ // nextSibling 下一个兄弟节点
|
|
|
+ // prevSibling 上一个兄弟节点
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e