一天挺一个朋友去面试要做一个获取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. src,href 和rel的区别

    src用于替换当前元素,值一般是引用的文件的绝对路径或者相对路径 href 属性的值可以是任何有效文档的相对或绝对URL,包括片段标识符和JavaScript代码段 rel REL属性用于定义链接的文 ...

  2. shallow update not allowed

    ! [remote rejected] master -> master (shallow update not allowed) https://stackoverflow.com/quest ...

  3. 重新认识new

    前言 感谢大佬:https://www.cnblogs.com/luxiaoxun/archive/2012/08/10/2631812.html www.cplusplus.com 因为这段时间在重 ...

  4. java多线程学习笔记(八)

    本节开始线程间通信: 使用wait/notify实现线程间通信 生产者/消费者模式的实现 方法join的使用 ThreadLocal类的使用 可以通过使用 sleep() 结合 while(true) ...

  5. TypeError: write() argument must be str, not bytes报错

    TypeError: write() argument must be str, not bytes 之前文件打开的语句是: with open('C:/result.pk','w') as fp: ...

  6. Dubbo 系列(07-4)集群容错 - 集群

    BDubbo 系列(07-4)集群容错 - 集群 [toc] Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍 相关文档推荐: Dubbo 集群容错 - 实战 D ...

  7. 不小心执行了 rm -f,先别急着跑路

    作者:justmine http://www.cnblogs.com/justmine/p/10359186.html 前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行 ...

  8. 淘汰赛制_NOI导刊2010提高(01)

    题目描述 淘汰赛制是一种极其残酷的比赛制度.2n名选手分别标号1,2,3,…,2^n-1,2^n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加该轮的选手按标号从小到大排序后,第1位与第2位比赛,第 ...

  9. shell数学运算

    shell的数学运算 branches@ubuntu:~$ var1=$[ * ] branches@ubuntu:~$ echo $var1 branches@ubuntu:~$ var2=$[$v ...

  10. JS的部分部分疑问和小结

    2015/9/1 1.在字符串中没有可以所需要查找的"X"的时候,返回的值  java:lastIndexof -1  js: IndexOf undefined... 2015/ ...