[發明專利]網頁頁面的標簽嵌套層級的顯示方法和裝置

有效

• 申請號: 201710209076.9
• 申請日: 2017-03-31
• 公開（公告）號: CN107423322B
• 公開（公告）日: 2020-03-03
• 發明（設計）人: 潘瀟
• 申請（專利權）人: 廣州視源電子科技股份有限公司;廣州視睿電子科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F16/901
• 代理公司: 廣州三環專利商標代理有限公司 44202
• 代理人: 麥小嬋;郝傳鑫

本發明公開了一種網頁頁面的標簽嵌套層級的顯示方法和裝置，所述方法包括：讀取當前打開的網頁頁面的DOM對象樹；DOM對象樹包括網頁頁面的body標簽節點的所有子標簽節點，以及每一個子標簽節點的后代標簽節點；對DOM對象樹進行先序遍歷，獲取遍歷到的標簽節點的屬性信息；生成與遍歷到的標簽節點所在的層級相匹配的層級數值；將屬性信息和層級數值進行關聯，生成標簽信息集合，并根據標簽信息集合生成網頁頁面的標簽嵌套層級的熱力圖，以展示網頁頁面的標簽嵌套層級。采用本發明能夠快捷且直觀地了解到網頁頁面的標簽嵌套層級。

技術領域

本發明涉及網絡數據處理領域，尤其涉及一種網頁頁面的標簽嵌套層級的顯示方法和裝置。

背景技術

前端技術人員在搭建網頁頁面時，通常會將多個HTML標簽進行嵌套，以實現多種功能。網頁頁面搭建完成后，當需要了解網頁頁面的標簽嵌套層級時，多是在網頁編輯器或者瀏覽器的開發者工具中查看網頁頁面的源代碼，再人工一層一層的數。然而，人工操作的速度較慢，且容易出現錯誤，工作效率以及準確率都較為低下。

發明內容

本發明所要解決的技術問題在于，提供一種網頁頁面的標簽嵌套層級的顯示方法和裝置，能夠快捷且直觀地了解到網頁頁面的標簽嵌套層級。

為了解決上述技術問題，本發明提出了一種網頁頁面的標簽嵌套層級的顯示方法和裝置，包括：

讀取當前打開的網頁頁面的DOM對象樹；所述DOM對象樹包括所述網頁頁面的body標簽節點的所有子標簽節點，以及每一個子標簽節點的后代標簽節點；

對所述DOM對象樹進行先序遍歷，獲取遍歷到的標簽節點的屬性信息；

生成與遍歷到的標簽節點所在的層級相匹配的層級數值；

將所述屬性信息和所述層級數值進行關聯，生成標簽信息集合；

根據所述標簽信息集合生成所述網頁頁面的標簽嵌套層級的熱力圖，以展示所述網頁頁面的標簽嵌套層級；

所述屬性信息包括標簽節點的尺寸參數和所述標簽節點相對于瀏覽器窗口左上角的坐標；其中，所述尺寸參數為寬度和長度；

所述根據所述標簽信息集合生成所述網頁頁面的標簽嵌套層級的熱力圖，以展示所述網頁頁面的標簽嵌套層級，具體包括：

提取所述標簽信息中所有標簽節點的屬性信息和層級數值，并根據每個標簽節點的屬性信息和層級數值在預設的畫布上繪制對應的具有標記信息的矩形區域，以得到目標畫布；其中，每一個矩形區域的位置和尺寸與一個標簽節點的坐標和尺寸參數相對應，每一個矩形區域的標記信息與一個標簽節點的層級數值相對應；

根據所述目標畫布生成所述網頁頁面的標簽嵌套層級的熱力圖；

在瀏覽器窗口中顯示所述標簽嵌套層級的熱力圖，以展示所述網頁頁面的標簽嵌套層級。

優選地，所述生成與遍歷到的標簽節點所在的層級相匹配的層級數值，具體為：

在首次遍歷當前標簽節點時，判斷當前標簽節點是否為所述body標簽節點的子標簽節點；

若是，則將所述當前標簽節點的層級數值配置為1；

若否，則將當前標簽節點的層級數值設置為其父標簽節點的層級數值加一后得到的數值。

優選地，所述標記信息包括顏色標記信息，且所述顏色標記信息的深度跟所述層級數值成正相關關系；

則所述提取所述標簽信息中所有標簽節點的屬性信息和層級數值，并根據每個標簽節點的屬性信息和層級數值在預設的畫布上繪制對應的具有標記信息的矩形區域，具體包括：