將同層級的h1 h6標籤轉為不同層級關係的列表

2022-10-11 01:12:12 字數 1029 閱讀 2471

昨天晚上寫隨筆時對的文章目錄產生了好奇心,原本同級的標題標籤是怎麼轉化為不同層級關係的列表呢?對此我展開了思考,終於,在今天早上按照自己的想法將轉化的邏輯寫了出來。

(文章目錄圖)

問題分析

要對乙個元素進行操作,就要先獲取元素。

既然每種標籤對應不同層級那麼先用列舉法將它們的權重乙個個列舉出來。

最後比較標籤權重,對標籤進行層級劃分。

實現

這是h5這是h5

這是h4

這是h4這是h6

將上述**轉為不同層級關係的列表

首先先獲取content的所有子節點

var content = document.getelementbyid('content');
建立乙個節點類封裝節點需要的資訊

function node() 

return weight;

}this.setnode = function(node)

}

需要乙個根節點包含列表項,這裡使用無序列表ul

var rootnode = new node();

rootnode.element = this.document.createelement('ul');

var prenode = rootnode;

接著是比較節點權重,這裡採用遞迴比較

function compareweight(curnode, prenode)  else 

}

最後遍歷所有子節點,封裝成帶有權重的節點物件,呼叫遞迴比較,最後將根節點顯示在文件中。

for (var i = 0; i < content.children.length; i++)

標題(H1 H6)標籤的使用原則

標題 h1 h6 標籤是指網頁html 中對文字標題所進行的著重強調的一種標籤,以標籤 依此顯示重要性的遞減,製作標籤的主要意義是告訴搜尋引擎這個是一段文字的標題,起強調作用。優化時怎麼使用標題 h1 h6 標籤?1 使用 如果產品展示裡面還分有幾個型別,那麼我們可以這樣定義 對於標題標籤的使用盡可...

html中h1 h6標籤對搜尋引擎seo的影響

一 h標籤是什麼?h標籤也叫做heading標籤,在html語言裡一共有六種大小的heading標籤,是網頁html 中對文字標題所進行的著重強調的一種標籤,以標籤 到定義標題頭的七個不同文字大小的tags,本質是為了呈現內容結構。共有六對,文字從大到小,依此顯示重要性的遞減,也就是權重依次降低。w...

分析修改h1標籤後出現的異象

為了進一步凸顯 關鍵詞,所以就修改了下 的h1標籤,之uynxtpktkl前的h1標籤內容是 天津 優化,seo方案策劃 劉虞seo 現在全站的h1標籤內容全部www.cppcns.com修改成 l程式設計客棧dquo 天津seo 這樣做應該不會觸及搜尋引擎的底線吧 我這樣做無疑就是為了精準突出關鍵...