怎么用脚本获取页面元素文本

本文目录导读：

1. 浏览器控制台（Console）直接获取
2. 完整示例脚本
3. 自动执行脚本（用于经常需要获取的场景）
4. Tampermonkey/Greasemonkey 用户脚本
5. Node.js 端（Puppeteer）
6. 不同属性获取文本的选择
7. 实用技巧

浏览器控制台（Console）直接获取

// 通过ID获取
document.getElementById('elementId').innerText
// 通过类名获取（第一个）
document.querySelector('.className').textContent
// 通过选择器获取
document.querySelector('#id .class').innerText
// 获取所有匹配元素文本
document.querySelectorAll('.class').forEach(el => console.log(el.innerText))

完整示例脚本

// 获取单个元素文本
function getElementText(selector) {
    const element = document.querySelector(selector);
    return element ? element.textContent.trim() : null;
}
// 获取所有匹配元素文本
function getAllElementsText(selector) {
    const elements = document.querySelectorAll(selector);
    return Array.from(elements).map(el => el.textContent.trim());
}
// 使用示例
console.log('标题:', getElementText('h1'));
console.log('所有链接:', getAllElementsText('a'));

自动执行脚本（用于经常需要获取的场景）

// 创建自动获取脚本
(function() {
    const targetSelector = '.your-target-class'; // 替换为目标元素选择器
    function grabText() {
        const elements = document.querySelectorAll(targetSelector);
        const texts = [];
        elements.forEach(el => texts.push(el.textContent.trim()));
        console.log('获取到的文本:', texts);
        return texts;
    }
    // 立即执行
    grabText();
    // 或绑定到快捷键
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.shiftKey && e.key === 'G') { // Ctrl+Shift+G
            grabText();
        }
    });
    console.log('脚本已加载，按 Ctrl+Shift+G 获取文本');
})();

Tampermonkey/Greasemonkey 用户脚本

// ==UserScript==
// @name         页面文本提取器
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  一键提取页面指定元素文本
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // 添加提取按钮
    const btn = document.createElement('button');
    btn.textContent = '提取文本';
    btn.style.cssText = 'position:fixed;top:10px;right:10px;z-index:9999;padding:8px 16px;';
    btn.onclick = function() {
        // 修改选择器为目标元素
        const elements = document.querySelectorAll('h2, p, .content');
        const result = Array.from(elements)
            .map(el => el.textContent.trim())
            .filter(text => text.length > 0);
        console.log('提取结果:', result);
        alert(`已提取 ${result.length} 个文本片段，查看控制台获取详细信息`);
    };
    document.body.appendChild(btn);
})();

Node.js 端（Puppeteer）

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    // 获取文本
    const text = await page.$eval('h1', el => el.textContent);
    console.log('内容:', text);
    // 获取多个元素文本
    const texts = await page.$$eval('p', elements => 
        elements.map(el => el.textContent.trim())
    );
    console.log('段落文本:', texts);
    await browser.close();
})();

不同属性获取文本的选择

// innerText - 考虑样式，不包含隐藏元素
element.innerText
// textContent - 包含所有文本，包括隐藏元素
element.textContent
// innerHTML - 包含HTML标签
element.innerHTML
// value - 表单元素的值
inputElement.value

实用技巧

1. 快速测试：F12打开控制台，直接输入选择器测试
2. 复制结果：

   copy(document.querySelector('.target').innerText)

3. 保存到变量：

   var texts = document.querySelectorAll('.item');

选择哪种方法取决于你的具体需求：

• 临时查看：控制台直接输入
• 定期使用：创建用户脚本
• 自动化测试：使用Puppeteer