面试题-输出所有页面宽度和高度大于 50 像素的节点_写一个traverse函数,输出所有页面宽度和高度大于50像素的节点。-优快云博客

本文链接：https://blog.youkuaiyun.com/ajnkajnsc/article/details/111244802

该博客介绍了如何通过JavaScript实现对网页中所有元素的遍历，以找到页面宽度和高度大于50像素的节点。首先，通过获取所有元素节点并检查它们的样式和offset属性来获取宽高。然后，使用优化后的代码，利用`querySelectorAll`和`filter`方法提高效率，只处理符合条件的节点。这个方法可以用于网页分析或性能优化场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

写一个 traverse 函数，输出所有页面宽度和高度大于 50 像素的节点

问题解析

先获取所有的元素节点，分别得到他们的页面宽与高，输出元素页面宽与高大于50的元素节点

解决方案：

普通版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>
<script>
    function traverse() {
        // 定义一个放结果的空数组arr
        var arr = [];
        // 所有节点标签放到elements[]中去
        var elements =[];
        if(document.all){
            elements = document.all;
        }else{
            elements = document.getElementsByTagName("*")
        }
        console.log(elements.length)
        // 获取到elements[i]的页面宽与高
        for(var i=0;i<elements.length;i++){
            var ele = elements[i]
            var width = parseFloat(ele.style.width)||ele.offsetWidth;
            var height = parseFloat(ele.style.height)||ele.offsetHeight;
            // 页面宽与高大于50的放进arr数组内
            if(width > 50&&height>50){
                arr.push(elements[i].tagName);
            }  
        }
        return arr;
    }
    window.onload = function () {
        console.log(traverse())
        
    }
</script>
</html>

优化版：

function traverse(){
    return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){
        return node.offsetWidth > 50 && node.offsetHeight > 50;
    });
}