遍历DOM的所有节点，输出宽度高度都大于50的元素节点名称
需要注意的问题有几点：
1、遍历所有元素节点的方式是：document.getElementsByTagName("*")，同时为了兼容性好可以再一句：document.all
2、节点的宽高怎么获得？
可以使用ele.style.width（返回值为字符串，需要使用parseFloat函数转换，元素的width必须明确指定，否则返回NaN），也可以使用ele.offsetWidth（返回值就是数字，不需要转换）
3、注意js代码的位置：
如果放在<head></head>里面，那么需要使用window.onload方式加载函数
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计Element节点</title>
<script language="javascript">
function traverse() {
var arr = [];
var elements = [];
if (document.all) {
elements = document.all;
} else {
elements = document.getElementsByTagName("*");
}
//console.log(elements.length);
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
//console.log(ele.tagName);
//width返回的是字符串 offsetWidth返回的是带边框的Number型的数字
var width = parseFloat(ele.style.width) || ele.offsetWidth;
//console.log(width);
var height = parseFloat(ele.style.height) || ele.offsetHeight;
//console.log(height);
if (width > 500 && height > 50) {
arr.push(elements[i].tagName);
}
}
return arr;
}
window.onload=function() //注意onload的使用方式
{
console.log(traverse());
}
</script>
<style type="text/css">
#demo {
border: #000 2px solid;
background-color: #fff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>测试</h1>
<table width="100" height="100" border="2" cellpadding="0" cellspacing="0">
<tr>
<td>
<form name="form1" action="" method="post">
<input type="text" name="ipput1" value="测试">
<br />
<input type="password" name="password" value="">
</form>
</td>
</tr>
</table>
<div id="demo"></div>
</body>
</html>
运行截图：
遍历DOM的所有节点，输出宽度高度都大于50的元素节点名称的更多相关文章
- jacascript DOM节点——元素节点、属性节点、文本节点
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...
- DOM中元素节点、属性节点、文本节点
DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
- 剑指前端（前端入门笔记系列）——DOM（元素节点）
DOM(元素节点) 本文介绍了元素节点的基本操作:增删改查 增 新增一个元素节点分为两步(二者缺一不可),第一步:创建元素节点,第二步:将创建的元素节点插入到指定元素节点中(也就是插入指定元素节点 ...
- DOM基础+domReady+元素节点类型判断
DOM节点类型 nodeType element 1 Node.ELEMENT_NODE 元素节点 attr 2 Node.ATTRIBUTE_NODE 属性节点 text 3 ...
- JavaScript的DOM编程--04--获取元素节点的子节点
获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...
- javascript中获取元素节点的文本
<div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...
- 获取元素节点的子节点 & 获取文本节点
1. 获取元素节点的子节点(**只有元素节点才有子节点): ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 ...
- 怎样获取当前文档所有的元素节点(即html标签节点)
方法1. 使用 document.getElementsByTagName("*"); 方法2. 使用document.querySelectorAll("*" ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
随机推荐
- show status详解
Aborted_clients 某种原因客户程序不能正常关闭连接而导致失败的连接的数量.没有正常关闭 Aborted_connects 指出试图连接到MYSQL的失败的次数.这种情况在客户尝试用错误的 ...
- flex/bison 计算器
flex %{ #include <stdio.h> #include "mycalc.tab.h" ;} %} %% "+" return ADD ...
- Nodejs v4.x.0API文档学习（2）Assert断言测试模块
文档参考地址:https://nodejs.org/dist/latest-v4.x/docs/api/ Assert(断言) assert模块提供了一组简单的断言测试方法,可以拥有测试不变量.该模块 ...
- 【转】monkeyrunner学习总结二：连接、安装、启动
一.获取packageName与startActivity 前置条件:已成功安装配置SL4A并连接PC调试(参见:monkeyrunner学习总结一:环境搭建:http://www.amsoft.cn ...
- sqlserver 2012 重启是 ID 自动增长 1000的问题
1. Open "SQL Server Configuration Manager"2. Click "SQL Server Services" on the ...
- ubuntu系统下wireshark普通用户抓包设置
dumpcap需要root权限才能使用的,以普通用户打开Wireshark,Wireshark当然没有权限使用dumpcap进行截取封包. 虽然可以使用 sudo wireshark ...
- iOS-深复制(mutableCopy)与浅复制(copy)
浅复制:只复制指向对象的指针,而不复制引用对象本身.对于浅复制来说,A和A_copy指向的是同一个内存资源,复制的只是一个指针,对象本身资源还是只有一份(对象引用计数+1),那如果我们对A_copy执 ...
- C# 多任务之 Task
Task 是什么 ? Task 是一个类, 它表示一个操作不返回一个值,通常以异步方式执行. Task 对象是一个的中心思想 基于任务的异步模式 首次引入.NET Framework 4 中. 继承层 ...
- 第10条：始终要覆盖toString
java.lang.Object的toString方法的实现: public String toString() { return getClass().getName() + "@&quo ...
- 一个css3流程导图
这也是公司用到的,写个demo出来分享 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...