如何用JS或jQuery彻底移除DOM元素？解决爬虫可见空H1标签问题

嘿，这个问题其实是很多前端开发者都会踩的坑，我来给你拆解清楚～

首先得明白一个核心点：你看到的“页面源码”是服务器最初发送给浏览器的原始HTML文件，而jQuery/原生JS执行的DOM操作，只是在浏览器加载完页面后修改了当前页面的DOM树（也就是浏览器渲染出来的页面结构），根本不会改变服务器返回的原始源码。所以不管你用哪种JS方法移除元素，爬虫如果只抓取服务器返回的原始响应（很多非JS渲染的爬虫都是这么做的），自然还是能看到这些空的<h1>标签。

那怎么才能彻底从源码里移除这个元素呢？这里有几个可行的方案：

• 服务器端渲染时直接移除（最推荐）
  这是最彻底的解决办法。不管你用的是PHP、Node.js、Python还是其他后端语言，在生成HTML输出的时候，判断这个<h1>标签是否为空，如果是空的就不输出它。这样服务器返回给浏览器和爬虫的原始源码里，本来就没有这个空标签，自然不存在后续的问题。

• 依赖支持JS渲染的爬虫（局限性大）
  像Googlebot这类主流搜索引擎的爬虫现在会执行页面中的JS，但不是所有爬虫都具备这个能力。如果你用JS移除元素，只有那些会执行JS的爬虫才会看不到这个标签，对于只抓取原始HTML的爬虫来说，还是能看到。所以这个方案只能作为补充，不能彻底解决问题。

• 别用CSS隐藏（无效）
  可能有人会想到用display: none或者visibility: hidden来隐藏这个标签，但这只是让用户看不到，爬虫依然能在源码里找到这个标签，完全不符合你的需求，所以别这么做。

再回头看你试过的代码：不管是$( ".nivo-h1-title" ).remove()还是原生JS的parentNode.removeChild，它们都是在客户端操作DOM，本质上只是修改了浏览器内存中的页面结构，不会触发生成新的HTML文件，所以原始源码肯定不会变。

内容的提问来源于stack exchange，提问作者Hristo Kalaidzhiev