zoukankan      html  css  js  c++  java
  • 遍历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>

    运行截图:

    image

     

  • 相关阅读:
    ExtJS 基础解析之【Ext.Window】
    螺旋队列算法分析 (转载)
    字符串NSString中去掉空格
    iOSCocos2d使用Zwoptex生成plist文件
    获取网上流视频总时长和当前播放时长
    popToViewController导航条跳转的用法
    iOS: Device token and registerForRemoteNotificationTypes, didReceiveRemoteNotification
    UILabel的详细使用及特殊效果
    UITextView使用sizeWithFont:计算自适应文本高度
    iPhone开放播放gif动画
  • 原文地址:https://www.cnblogs.com/audi-car/p/4783790.html
Copyright © 2011-2022 走看看