一天挺一个朋友去面试要做一个获取dom元素到数组中

主要用到一个递归算法,通过节点的childNodes属性--代码如下:

function getAllNode() {
var nodes = document.childNodes;
var arr_all_ele = [];
function returnNode(arr_nodes, arr_all_ele) {
for(var i=0; i<arr_nodes.length; i++) {
var parentNode = arr_nodes[i];
arr_all_ele.push(parentNode);
var childNodes = parentNode.childNodes;
if(childNodes.length != 0) {
returnNode(childNodes, arr_all_ele);
}
}
}
returnNode(document.childNodes, arr_all_ele);
return arr_all_ele;
}

返回结果是所有dom到一个数组中:

![](https://images2018.cnblogs.com/blog/1244681/201807/1244681-20180726090031658-2049325683.png)

原生写一个一键获取所有DOM元素的方法的更多相关文章

  1. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  2. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  3. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  4. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  5. JS----获取DOM元素的方法(8种)

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  6. JS选取DOM元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今 ...

  7. JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  8. 关于jq的load不用回调获取其中dom元素方法

    jq的load方法如果要操作其中的dom元素,需要使用回调,等其加载完了再进行dom元素的获取,今天看我们项目组长写的一段代码,发现不用回调也能获取到其中的元素. 具体是这样写的: <scrip ...

  9. 获取或操作DOM元素特性的几种方式

    1. 通过元素的属性 可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id.title.style.align.className等,注意,因为在ECMAScript中, ...

随机推荐

  1. 几乎相同的 deal.jsp 代码(index.jsp不变),在IDEA相同项目运行,结果却不一样,实在想不出来

    目录 主要问题 主要项目 index.jsp: deal.jsp(正确可运行): deal.jsp(错误不可运行): 错误的代码运行图片: 可运行的代码运行图片 主要问题 几乎相同的 deal.jsp ...

  2. hbase centos7 安装体验

    1. 准备需要jdk1.8,hbase安装文件.大家可以官网下载. 解压文件,复制到指定目录 tar -zxvf  jdk-8u201-linux-x64.tar.gz tar -zxvf  hbas ...

  3. SPRING CLOUD微服务DEMO-下篇

    目录 1 Hystix 1.1 简介 1.2 配置并测试 2. Feign 2.1 简介 2.2 使用Feign 2.3 负载均衡 2.4 Hystrix支持 2.5.请求压缩 3. Zuul网关 3 ...

  4. 显示等待WebDriverWait+EC

    参考:https://www.cnblogs.com/yoyoketang/p/6538505.html 百度搜索关键字,等待搜索结果页面显示完成后,验证搜索结果的第一条记录 通过WebDriverW ...

  5. C语言I博客作业008

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 http://edu.cnblogs.com/campus/zswxy/SE2019-3/homework/9982 我在这个课程的目标是 ...

  6. 三、python之文件的处理

    1.文件的读取 1.1 读取整个文件 假设我们有一个叫做“hello.txt”的文件,文件内容如下: helloWorld helloPython helloJava 在该文件中,有三行字符串,接下来 ...

  7. docker--shell和Exec格式

    shell格式 RUN apt-get install -y vim CMD echo "docker so easy" ENTRYPOINT echo "docker ...

  8. 任正非:5G技术只独家卖给美国!不卖给韩国、日本、欧洲

    https://v.qq.com/x/page/g3001d0xvxe.html 我只转个标题,细节不管了. 呃,实际上就是说,老任头也决定向美国低头了,对不. 不过,也确实没办法. 该起床吃钙片了.

  9. 【记录】@Configuration注解作用 mybatis @Param作用

    参考地址: 1:https://www.cnblogs.com/duanxz/p/7493276.html 2:https://www.wandouip.com/t5i91156/ 3:https:/ ...

  10. ANSI-2

    一.ANSI编码 1. 如前所述,在全世界所有国家和地区的文字符号统一编码的UCS/Unicode编码方案问世之前(UCS.Unicode后文有详细介绍),各个国家.地区为了用计算机记录并显示自己的字 ...