原生javascript使用递归思路获取html跟元素

来源：互联网发布：unity3d初音炫舞源码编辑：程序博客网时间：2024/05/21 08:53

其实获取跟元素的方法有很多，而且很简单比如常见的有

var root=document;//根元素
var all=document.documentElement;//从到
通过元素选择器，
getElementById,
getElementsByClassName,
getElementsByTagName,
querySelector等等很多。

但是这里主要是介绍的一种递归思路，不过一般不会用于获取跟节点。只是介绍简单的介绍递归而已，便于开拓思维理解简单的递归！

代码demo如下：

<!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>    <style>        *{margin:0;padding:0;}    </style></head><body>    <div class="ob" id="od">        我是主<span>体内容</span>        <div class="aa">            <p>                sdfsakd                 <a >                    <span>qqq<em>1212</em></span>                </a>                <h1>dsj市</h1>            </p>        </div>    </div>    <script>        var em = document.querySelector("#od h1");        console.log(em);        //方法一：        function htmlFirst(){            var result;            (function(elem){                if(elem.parentNode.tagName == "HTML"){                    result = elem.parentNode;                    return result;                }else{                    arguments.callee(elem.parentNode);                }            })(em);            return result;        }        //方法二：        function htmlSec(elem){            var result;            while(elem.parentNode){                elem = elem.parentNode;                result = elem;                continue;            }            return result;        }        console.log(document);    </script></body></html>

运行结果如下：

这里写图片描述

阅读全文

0 0