DOM节点操作详解-优快云博客

本文深入探讨了在Web环境中如何获取和操作DOM节点，包括使用JavaScript的基本选择器、DOM遍历方法以及结合ElementUI进行前端组件的节点操作。通过实例解析，帮助读者掌握高效地获取和操作网页元素的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="">Lorem ipsum dolor sit.</a></li>
            <li><a href="">Laboriosam esse voluptatibus accusamus!</a></li>
            <li><a href="">Minima cumque alias numquam!</a></li>
            <li><a href="">Beatae sit quod earum?</a></li>
            <li><a href="">Doloremque vitae totam pariatur.</a></li>
            <li><a href="">Autem ab iusto quae.</a></li>
            <li><a href="">Mollitia accusamus iure maxime.</a></li>
            <li><a href="">Sapiente vitae nostrum ex?</a></li>
            <li><a href="">Aut quos est amet!</a></li>
            <li><a href="">Laudantium dicta fuga debitis.</a></li>
        </ul>
    </div>

    <div class="container2">
        <span>asdfasfd</span>
        <strong>asdfasdfgasdfa</strong>
        <i>asadfasfas</i>
        <p>aasdfdasf</p>
        <div class="c3">
            <p>dfgasdfasfaf</p>
        </div>
    </div>

    <script>
        // 查询任意一个标签的父元素为div 一直向上查询，直到找到html为止，如果查询到了就打印这个div
        function a(name) {
            var tagname = document.querySelector(name)
            fn(tagname)

            function fn(tagname) {
                if (tagname.parentNode.tagName == "DIV"){
                    console.log(tagname.parentNode)
                } else if (tagname.parentNode.tagName == "HTML") {
                    console.log("没有找到")
                } else {
                    return fn(tagname.parentNode)
                }
            }

        }

        a("ul")
    </script>
</body>
</html>

获取dom节点（2）