《前端實戰總結》之使用解釋器模式實現獲取元素Xpath路徑的算法

時間 2019-12-08

標籤前端實戰總結使用解釋器模式實現獲取元素 xpath 路徑算法简体版

原文原文鏈接

前端領域裏基於javascript的設計模式和算法有不少，在不少複雜應用中也扮演着很重要的角色，接下來就介紹一下javascript設計模式中的解釋器模式，並用它來實現一個獲取元素Xpath路徑的算法。javascript

上期回顧

正文

1.解釋器模式

對於一種語言，咱們給出其文法表示形式（一種語言中的語法描述工具，用來定義語言的規則），並定義一種解釋器，經過這種解釋器來解釋語言中定義的句子。css

定義聽起來可能比較抽象，舉個例子好比咱們常見的網站多語言，要實現多語言咱們首先要預約語言的類型，提早設計不一樣語言的語料庫，而後咱們會根據配置和統一的變量規則來映射到不一樣語言。html

2.元素的Xpath路徑

XPath 用於在 XML 文檔中經過元素和屬性進行導航。雖然XPath 是用來查找XML節點，但一樣能夠用來查找HTML文檔中的節點，由於HTML和XML結構相似。這裏咱們只考慮html，即元素在html頁面中所處的路徑。前端

那麼如何快速獲取元素的Xpath路徑呢？其實也很簡單，咱們打開谷歌調試工具：vue

選中某個元素，以下，單機鼠標右鍵：

選中Copy XPath便可複製元素的Xpath路徑。格式可能長這樣：

//*[@id="juejin"]/div[2]/main/div/div[1]/article/div[1]
複製代碼

獲取元素Xpath路徑的應用場景不少，好比咱們常常使用的python爬蟲，利用爬蟲框架能夠經過Xpath路徑很方便額控制頁面中的某個dom節點，進而獲取想要的數據和元素；又好比咱們經過發送元素的Xpath路徑給後端，後端能夠統計某一功能的使用狀況和交互數據；又好比分析用戶在網站中瀏覽的熱力分佈圖，路徑畫像等等。java

3.js實現獲取元素的Xpath路徑

在實現以前，首先咱們分析一下Xpath路徑的結構，好比咱們有一個頁面，元素span的結構以下：node

<!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路徑可能長這樣：python

HTML/BODY|HEAD/DIV/SPAN
複製代碼

從上面能夠看出，咱們的最右邊一個元素都是目標元素，而最左邊第一個元素都是最外層容器。要完成這個過程首先咱們要經過元素的parentNode來獲取當前元素的父元素，直到找到最頂層位置。但咱們還須要注意的一點是，每找到上一層咱們還要遍歷該元素前面的兄弟元素previousSibling，若是這個兄弟元素名字和它後面的元素名字相同，則在元素名上+1.webpack

第一步咱們先實現一個遍歷同級兄弟元素的方法getSameLevelName：css3

// 獲取兄弟元素名稱
function getSameLevelName(node){
    // 若是存在兄弟元素
    if(node.previousSibling) {
        let name = '',   // 返回的兄弟元素名稱字符串
           count = 1,    // 緊鄰兄弟元素中相同名稱元素個數
           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 {
                    // 重製相同緊鄰節點名稱節點個數
                    count = 1;
                    // 追加新的節點名稱
                    name += '|' + sibling.nodeName.toUpperCase()
                }
            }
            sibling = sibling.previousSibling;
        }
        return name
    }else {
        // 不存在兄弟元素返回''
        return ''
    }
}
複製代碼

第二步，遍歷文檔樹。

// XPath解釋器
let Interpreter = (function(){
    return function(node, wrap){
        // 路徑數組
        let path = [],
        // 若是不存在容器節點，默認爲document
        wrap = wrap || document;
        // 若是當前節點等於容器節點
        if(node === wrap) {
            if(wrap.nodeType == 1) {
                path.push(wrap.nodeName.toUpperCase())
            }
            return path
        }
        // 若是當前節點的父節點不等於容器節點
        if(node.parentNode !== wrap){
            // 對當前節點的父節點執行遍歷操做
            path = arguments.callee(node.parentNode, wrap)
        }
        // 若是當前節點的父元素節點與容器節點相同
        else {
            wrap.nodeType == 1 && path.push(wrap.nodeName.toUpperCase())
        }
        // 獲取元素的兄弟元素的名稱統計
        let siblingsNames = getSameLevelName(node)
        if(node.nodeType == 1){
            path.push(node.nodeName.toUpperCase() + sublingsNames)
        }
        // 返回最終的路徑數組結果
        return path
    }
})()
複製代碼

有了這兩個方法，咱們就能夠輕鬆獲取元素的XPath路徑啦，好比：

let path = Interpreter(document.querySelector('span'))
console.log(path.join('/'))
複製代碼

這樣會返回開篇的同樣的數據結構了.如：HTML/BODY|HEAD/DIV/SPAN

最後

若是想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。

《前端實戰總結》之使用解釋器模式實現獲取元素Xpath路徑的算法

上期回顧

正文

1.解釋器模式

2.元素的Xpath路徑

3.js實現獲取元素的Xpath路徑

最後

更多推薦