使用解釋器模式實(shí)現(xiàn)獲取元素 Xpath 路徑的算法

作者：徐小夕 2021-10-30 20:49:24

對(duì)于一種語言，我們給出其文法表示形式(一種語言中的語法描述工具，用來定義語言的規(guī)則)，并定義一種解釋器，通過這種解釋器來解釋語言中定義的句子。

[[432233]]

正文

1.解釋器模式

定義聽起來可能比較抽象，舉個(gè)例子比如我們常見的網(wǎng)站多語言，要實(shí)現(xiàn)多語言我們首先要預(yù)定語言的類型，提前設(shè)計(jì)不同語言的語料庫，然后我們會(huì)根據(jù)配置和統(tǒng)一的變量規(guī)則來映射到不同語言。

2.元素的Xpath路徑

XPath 用于在 XML 文檔中通過元素和屬性進(jìn)行導(dǎo)航。雖然XPath 是用來查找XML節(jié)點(diǎn)，但同樣可以用來查找HTML文檔中的節(jié)點(diǎn)，因?yàn)镠TML和XML結(jié)構(gòu)類似。這里我們只考慮html，即元素在html頁面中所處的路徑。

那么如何快速獲取元素的Xpath路徑呢?其實(shí)也很簡(jiǎn)單，我們打開谷歌調(diào)試工具：

選中Copy XPath即可復(fù)制元素的Xpath路徑。格式可能長這樣：

//*[@id="juejin"]/div[2]/main/div/div[1]/article/div[1]

獲取元素Xpath路徑的應(yīng)用場(chǎng)景很多，比如我們經(jīng)常使用的python爬蟲，利用爬蟲框架可以通過Xpath路徑很方便額控制頁面中的某個(gè)dom節(jié)點(diǎn)，進(jìn)而獲取想要的數(shù)據(jù)和元素;又比如我們通過發(fā)送元素的Xpath路徑給后端，后端可以統(tǒng)計(jì)某一功能的使用情況和交互數(shù)據(jù);又比如分析用戶在網(wǎng)站中瀏覽的熱力分布圖，路徑畫像等等。

3.js實(shí)現(xiàn)獲取元素的Xpath路徑

在實(shí)現(xiàn)之前，首先我們分析一下Xpath路徑的結(jié)構(gòu)，比如我們有一個(gè)頁面，元素span的結(jié)構(gòu)如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Document</title> 
</head> 
<body> 
<div> 
<span>我是徐小夕</span> 
</div> 
</body> 
</html>

那么我們的Xpath路徑可能長這樣：

HTML/BODY|HEAD/DIV/SPAN

從上面可以看出，我們的最右邊一個(gè)元素都是目標(biāo)元素，而最左邊第一個(gè)元素都是最外層容器。要完成這個(gè)過程首先我們要通過元素的parentNode來獲取當(dāng)前元素的父元素，直到找到最頂層位置。但我們還需要注意的一點(diǎn)是，每找到上一層我們還要遍歷該元素前面的兄弟元素previousSibling，如果這個(gè)兄弟元素名字和它后面的元素名字相同，則在元素名上+1.

第一步我們先實(shí)現(xiàn)一個(gè)遍歷同級(jí)兄弟元素的方法getSameLevelName：

// 獲取兄弟元素名稱 
function getSameLevelName(node){ 
    // 如果存在兄弟元素 
    if(node.previousSibling) { 
        let name = '',   // 返回的兄弟元素名稱字符串 
           count = 1,    // 緊鄰兄弟元素中相同名稱元素個(gè)數(shù) 
           nodeName = node.nodeName, 
           sibling = node.previousSibling; 
        while(sibling){ 
            if(sibling.nodeType == 1 && sibling.nodeType === node.nodeType && sibling.nodeName){ 
                if(nodeName == sibling.nodeName){ 
                    name += ++count; 
                }else { 
                    // 重制相同緊鄰節(jié)點(diǎn)名稱節(jié)點(diǎn)個(gè)數(shù) 
                    count = 1; 
                    // 追加新的節(jié)點(diǎn)名稱 
                    name += '|' + sibling.nodeName.toUpperCase() 
                } 
            } 
            sibling = sibling.previousSibling; 
        } 
        return name 
    }else { 
        // 不存在兄弟元素返回'' 
        return '' 
    } 
}

第二步，遍歷文檔樹。

// XPath解釋器 
let Interpreter = (function(){ 
return function(node, wrap){ 
// 路徑數(shù)組 
let path = [], 
// 如果不存在容器節(jié)點(diǎn)，默認(rèn)為document 
wrap = wrap || document; 
// 如果當(dāng)前節(jié)點(diǎn)等于容器節(jié)點(diǎn) 
if(node === wrap) { 
if(wrap.nodeType == 1) { 
path.push(wrap.nodeName.toUpperCase()) 
} 
return path 
} 
// 如果當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)不等于容器節(jié)點(diǎn) 
if(node.parentNode !== wrap){ 
// 對(duì)當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)執(zhí)行遍歷操作 
path = arguments.callee(node.parentNode, wrap) 
} 
// 如果當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)與容器節(jié)點(diǎn)相同 
else { 
wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase()) 
} 
// 獲取元素的兄弟元素的名稱統(tǒng)計(jì) 
let siblingsNames = getSameLevelName(node) 
if(node.nodeType == 1){ 
path.push(node.nodeName.toUpperCase() + sublingsNames) 
} 
// 返回最終的路徑數(shù)組結(jié)果 
return path 
} 
})()

有了這兩個(gè)方法，我們就可以輕松獲取元素的XPath路徑啦，比如：

let path = Interpreter(document.querySelector('span')) 
console.log(path.join('/'))

這樣會(huì)返回開篇的一樣的數(shù)據(jù)結(jié)構(gòu)了.如：HTML/BODY|HEAD/DIV/SPAN

責(zé)任編輯：武曉燕來源：趣談前端

算法 Xpath 路徑