1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title>父子节点</title>
    8. </head>
    9. <body>
    10. <div>
    11. <ul>
    12. <li>1</li>
    13. <li>2</li>
    14. <li>3</li>
    15. </ul>
    16. </div>
    17. <script>
    18. const ul = document.querySelector('ul')
    19. console.log('父节点:', ul.parentNode) // 最近的父节点
    20. console.log('子节点:', ul.childNodes) // 文本节点和元素节点
    21. console.log('子节点:', ul.children) // 纯元素节点
    22. </script>
    23. </body>
    24. </html>

    image.png