一天挺一个朋友去面试要做一个获取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. Leaflet-Leafletv0.7使用leaflet-bing-layer

    digidem/leaflet-bing-layer: Bing Maps Layer for Leaflet v1.0.0:从标题就可以看出要Leaflet v1.0.0才能用.其实leaflet ...

  2. 安装php时,configure: error: xml2-config not found. Please check your libxml2 installation

    参考文章:http://blog.csdn.net/anljf/article/details/6981247 安装php时的报错configure: error: xml2-config not f ...

  3. Html5 学习笔记 --》css3 学习

    在开发任务中最好不要使用前缀 可以设置发散图形 圆形 方形等 边框图片效果: CSS3 变形效果: Css3 3D立体变形: css 设置 CSS3 过度效果: div:hover { backgro ...

  4. spring boot 尚桂谷学习笔记11 数据访问03 JPA

    整合JPA SpringData 程序数据交互结构图 (springdata jpa 默认使用 hibernate 进行封装) 使用之后就关注于 SpringData 不用再花多经历关注具体各个交互框 ...

  5. 网络命令-nc(一)

    一直在linux环境下编程,但却没有用过nc命令,不过最近发现Netcat这个命令-nc,发现真的蛮强大的, 为了备忘,就写了这个博客吧,不求全,只求把自己觉得很有用的命令整理出来,这篇文章估计要长期 ...

  6. python 装饰器 第四步:基本装饰器的实现

    #第四步:基本装饰器的实现 #用于扩展基本函数的函数 def kuozhan(func): #内部函数(扩展之后的eat函数) def neweat(): #以下三步就是扩展之后的功能,于是我们把这三 ...

  7. Python中单下划线和双下划线

    1.双下划线开头和结尾 Python中存在一些特殊的方法,有些方法以双下划线 “__” 开头和结尾,它们是Python的魔法函数,比如__init__()和__str__等等.不用要这种方式命名自己的 ...

  8. 监控工具 zxbbix

    报错 [Z3001] connection to database 'zabbix' failed: [2002] Can't connect to local MySQL server throug ...

  9. 简单认识php

    1.输出语句: echo 'hello world'; 2.声明变量用 $ 符号 $uname = 'andy'; 3. php 拼接字符串用 点(.) //设置中文编码 header("c ...

  10. 饿汉单例模式 and 懒汉单例模式

    饿汉单例模式:主要就是利用static关键字,在类加载的时候生成实例,调用效率高 但是如果一直没有调用getInstance方法的话,就会造成资源浪费 具体实现如下: class Single{ pr ...