js获取网页内容

浏览器里打开一个网页，网页按下F12，内容Console面板就是网页你的游乐场。想拿到页面上的内容文字？document.body.innerText，一行代码，网页全文到手。内容这个方法直接粗暴，网页把可见文本全捞出来，内容连换行都给你保留。网页但有个坑——它会把脚本里动态渲染的内容内容也算进去，如果页面是网页异步加载的，你得等数据到位后再执行。内容

更精准的网页做法是document.querySelector('article').textContent。我常去抓某个新闻站，内容它的网页正文藏在<div class="content">里，用这个选择器就能精准命中。不过textContent会保留HTML标签里的隐藏空格，比如<span style="display:none">里的文字它照样给，这时候得先过滤掉不可见元素。

真要处理复杂页面，我会用document.getElementsByTagName('p')循环拼接。某次抓一个论坛帖子，正文全是<p>标签，但中间夹杂着广告和签名档。我写了个过滤函数，只保留class含"post-content"的段落，再拼接成纯文本。那感觉就像在垃圾堆里捡金子，但一旦跑通，效率极高。

还有种野路子——用outerHTML直接拿整个DOM字符串。上次帮朋友分析一个电商页面，他想知道价格是怎么动态刷新的。我抓了document.querySelector('.price').outerHTML，发现里面绑定了Vue的响应式属性，顺着这个线索找到了他的数据接口。这个方法适合逆向工程，但拿到的内容会带一堆属性，臃肿得很。

说到异步内容，得提MutationObserver。这玩意儿能监听DOM变化，等目标节点出现后再抓取。我写过一个小书签工具，专门抓取无限滚动列表的内容。页面往下滚，新内容加载，观察器触发回调，自动把新条目存进数组。一开始总抓漏，后来发现要设置childList: true和subtree: true两个选项，才算完整。

实际生活里，最常用的场景是写爬虫脚本。用Node.js配合jsdom库，模拟浏览器环境，然后照常在window.document上操作。比如抓豆瓣电影短评，我先把HTML喂给jsdom，再用document.querySelectorAll('.comment-content')提取，最后清洗数据存成JSON。整个过程就像在服务器上开了一个隐形浏览器，不渲染页面，只捞文字。

不过别指望所有页面都配合。有些网站用canvas画内容，或者用shadow DOM隔离样式，传统方法就失效了。遇到这种，我直接放弃js，改用OCR识别截图。虽然笨，但管用。说到底，js抓网页内容的核心思路就一条：找到内容所在的节点，然后用合适的方法把文本抠出来。至于用哪种选择器、怎么处理动态加载，都是围绕这个目标的技术细节。