display:none的内容如何过滤掉?

发布于 2022-09-12 13:55:40 字数 28 浏览 24 评论 0

display:none的内容如何过滤掉?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

虫児飞 2022-09-19 13:55:40

display: none 相当于你已经过滤掉了,不占用dom
你可以去了解一下none和hide

马蹄踏│碎落叶 2022-09-19 13:55:40

你这个问题是 querylist 话题下的,猜测你是做爬虫。

image.png

那么从 display:none 设置方式先说一下

<div id="app">
    <div class="div1">1</div>
    <div id="app2">2</div>
    <div style="display:none">3</div>
    <div>4</div>
</div>
<style>
    .div1,#app2{display:none}
</style>

http://jsrun.net/bAIKp/edit

可以通过多种形式设置

  1. 行内样式 style
  2. style 标签
  3. link 标签
  4. 还可以 @import 加载
  5. 还可以通过 js 操作

    1. dom.style.display
    2. dom.setAttribute
    3. dom.className
    4. dom.classList.add
    5. ...这个就太多了

接下来就是爬虫常见处理方法了

  1. 字符串处理,正则表达式之类的

    1. 正则匹配出现 display:none 的注意大小写和空格。
  2. 转换为xml树之类的

    1. 这个就是无脑递归遍历,取style然后判断了。
  3. 无头浏览器(上面两个方案的缺点差不多,无法检测出所有场景。其实也可以,那就是自己实现css渲染树、dom渲染树,那我估计你是喝多了

    1. 那就简单了,看我 jquery 大法
      image.png
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文