在網(wǎng)頁數(shù)據(jù)采集場景中，偽元素（:before/:after）渲染的文本或樣式屬性常難以直接捕獲，而影刀RPA結(jié)合自定義JS代碼可高效解決這一問題。本文結(jié)合足球賽事數(shù)據(jù)頁面案例，詳細拆解偽元素:before文本獲取與:after display屬性獲取的完整流程，搭配參考視頻教程，助力快速上手。

網(wǎng)站如下

https:///football/info-list/12661320-5-1?code=302

一、實戰(zhàn)基礎(chǔ)：偽元素操作核心原理

偽元素是CSS渲染的虛擬元素，并非DOM樹直接節(jié)點，無法通過常規(guī)元素定位獲取其內(nèi)容或?qū)傩浴Ｓ暗禦PA支持嵌入自定義JavaScript代碼，借助window.getComputedStyle方法讀取偽元素的計算樣式，從而提取目標信息。本文將基于兩個核心需求展開：一是獲取偽元素:before的文本內(nèi)容，二是獲取偽元素:after的display屬性值。

二、實戰(zhàn)一：獲取偽元素:before的文本（以為例）

1. 應(yīng)用場景

的足球賽事賠率頁面中，部分賽事狀態(tài)、附加說明等文本可能通過偽元素:before渲染，常規(guī)元素捕獲工具無法直接提取，需通過自定義代碼實現(xiàn)。

2. 核心代碼解析

用戶提供的代碼可直接用于獲取:before偽元素的文本內(nèi)容：

function (element, input) {
    return window.getComputedStyle(element,"before").content;
}

• window.getComputedStyle

  ：用于獲取元素的計算樣式，包含偽元素的渲染信息。
• 第一個參數(shù)element：影刀RPA定位到的目標DOM元素（需提前在頁面中選中）。
• 第二個參數(shù)"before"：指定要獲取的偽元素類型（此處為:before）。

• .content

  ：獲取偽元素的文本內(nèi)容（CSS中通過content屬性定義）。

3. 實操步驟

1. 打開影刀RPA，新建網(wǎng)頁自動化流程，配置賽事數(shù)據(jù)頁面（https:///football/info-list/12661320-5-1?code=302）。
2. 用影刀的元素定位工具，選中需要提取:before文本的目標元素（如賠率狀態(tài)標簽、附加說明容器）。
3. 在流程中添加“執(zhí)行自定義JavaScript”組件，粘貼上述核心代碼，將代碼中的element與定位到的目標元素關(guān)聯(lián)。
4. 運行組件，即可返回偽元素:before渲染的文本內(nèi)容（如賽事狀態(tài)說明、附加標記等）。

三、實戰(zhàn)二：獲取偽元素:after的display屬性值

1. 應(yīng)用場景

偽元素:after常用于渲染圖標、狀態(tài)標識等，其display屬性（如block、none）可反映元素的顯示狀態(tài)（例：賽事是否可投注、數(shù)據(jù)是否更新），需精準捕獲以輔助數(shù)據(jù)判斷。

2. 核心代碼解析

針對:after的display屬性，用戶提供的專用代碼如下：

var curNumStr = getComputedStyle(document.querySelector('#contentDiv'), ':after').display;

• document.querySelector('#contentDiv')

  ：通過CSS選擇器定位目標元素（此處以#contentDiv為例，需替換為實際元素ID/類名）。

• ':after'

  ：指定偽元素類型為:after。

• .display

  ：獲取偽元素的display屬性值（返回結(jié)果如"block"、"none"、"inline"）。
• 變量curNumStr用于存儲結(jié)果，可直接在影刀流程中調(diào)用該變量。

3. 適配的調(diào)整要點

1. 打開目標頁面，通過瀏覽器“開發(fā)者工具”（F12）定位包含:after偽元素的目標元素，獲取其準確選擇器（如ID、類名、層級關(guān)系）。
2. 將代碼中的#contentDiv替換為實際選擇器（例：若元素類名為odds-after，則改為.odds-after）。
3. 在影刀RPA中添加“執(zhí)行自定義JavaScript”組件，粘貼修改后的代碼，運行后即可獲取:after的display屬性值，用于后續(xù)邏輯判斷（如顯示則執(zhí)行采集，隱藏則跳過）。

四、關(guān)鍵注意事項

1. 元素選擇器必須精準：需通過瀏覽器開發(fā)者工具確認目標元素的真實選擇器，避免因選擇器錯誤導(dǎo)致無法獲取偽元素信息。
2. 偽元素依賴CSS加載：確保頁面完全加載后再執(zhí)行代碼，可在影刀流程中添加“等待元素出現(xiàn)”“等待頁面加載完成”組件。
3. 結(jié)合參考視頻學(xué)習(xí)：B站教程（https://www.bilibili.com/video/BV1ZpynBPE2K/）包含偽元素獲取的實操演示，可對照視頻掌握影刀RPA組件配置、元素定位的細節(jié)。
4. 代碼兼容性：上述代碼基于標準JS語法，適配主流瀏覽器（Chrome、Edge），無需額外修改即可在影刀RPA中運行。

總結(jié)

通過自定義JS代碼與影刀RPA的結(jié)合，可高效解決偽元素文本及屬性的采集難題。本文提供的兩套代碼可直接適配等類似網(wǎng)頁，只需替換目標元素選擇器即可快速落地。建議結(jié)合參考視頻的實操演示，重點掌握元素定位與代碼嵌入的銜接流程，提升數(shù)據(jù)采集的全面性與效率。