目錄

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕～

前端小試身手(2)--it幫跳轉到最佳解答

前端小試身手(3)--增添系列文目錄

前端小試身手(4)--it幫發文「一眼全覽」

前端小試身手(5)-備份it幫的發問！

前端小試身手(6)--IMG複製大師，懶人專用小腳本

前端小試身手(7)--迷片靜音神隊友，讓你尷尬不再有！

前端小試身手(8)--教你寫出「思想審查警衛」，過濾垃圾雜訊的利器！

前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

前題：

it邦的鐵人賽系列文一直都是學習的明燈，
可惜滑到頁面底部，卻沒有完整的「鐵人賽系列文目錄」，最多五篇。

導致如果讀者想要，
從「最開始的第一篇文章開始追」、「綜觀整個系列架構」，都是困難。

因此就需要增添一個選單目錄，方便學習者去檢索資訊。

效果圖：

新增一個選單

選單點開，有系列文的所有文章（我code只寫到至多30篇，多出來的不抓）

使用tampermonkey外掛的
程式碼：

// ==UserScript==
// @name         新增系列文選單
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  鐵人賽系列文的目錄  添加在文章底下(目前最多只抓三頁)
// @author       jeff
// @match        https://ithelp.ithome.com.tw/articles*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw
// @grant        none
// ==/UserScript==

(function() {

window.addEventListener("load", function(event) {

        if (document.querySelector("body > div.container.index-top > div > div > div.leftside > div.article-series > div.article-series-catalog > div.article-series-catalog__badge")!=null){NewSelect()}

function NewSelect(){
    //鐵人賽系列的網址串
target=document.querySelector("body > div.container.index-top > div > div > div.leftside > div.article-series > div.article-series-catalog > div.clearfix > a").href

//計算有幾頁的鐵人賽
count=document.querySelector("body > div.container.index-top > div > div > div.leftside > div.article-series > div.article-series-catalog > div.article-series-catalog__topic > span").innerText

//因為一頁10個所以計算公式:  除10然後向上取整數
let Page=Math.ceil(count/10)

//儲存鐵人所有網址的陣列
const Url=[]

//抓第一頁的標題&網址
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {

//處理DOM用的解讀器
parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, "text/html");

//創建選單以及CSS的美化
select=doc.createElement('select')
select.style=`margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    font-size: 16px;
    height: 46px;
    border-radius: 20px;
    padding-left: 10px;`

//新增監聽事件觸發:選到->打開網頁
select.addEventListener("change", OpenNew);

//在ajax的頁面(目錄頁)中存下所有的標題&網址
chunks=doc.querySelectorAll(" h3 > a")

//以迴圈將"標題"建立在選單內容中
for (i=0;i<chunks.length;i++){
option1=doc.createElement('option')
option1.innerText=chunks[i].innerText
option1.value=i

//而所有的網址都丟進陣列裡儲存
Url.push(chunks[i].href)

//貼到已經建立好的選單
select.appendChild(option1)
}
//得到要丟的網頁位置  也就是鐵人文章下目錄那區塊
Position=document.querySelector("body > div.container.index-top > div > div > div.leftside > div.article-series > div.article-series-catalog > div.clearfix > ol")

//用前塞把選單整個加入
Position.insertBefore(select,Position.firstChild)

//當選取選單內容會執行的函式:用val值去陣列裡找網址  ->打開網址
function OpenNew()
{
  const Val = select.options[select.selectedIndex].value;
url=Url[Val]
window.open(url)
}}
}
xhr.open('GET', target, true);
xhr.send(null);

//--------------------------------------------------------
//抓第二頁的標題&網址
async function B(){if (Page>1){

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {

parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, "text/html");

select.addEventListener("change", OpenNew2);
//迴圈
chunks=doc.querySelectorAll(" h3 > a")

for (i=10;i<chunks.length+10;i++){
option1=doc.createElement('option')
option1.innerText=chunks[i-10].innerText
option1.value=i
Url.push(chunks[i-10].href)
select.appendChild(option1)
}

function OpenNew2()
{
  const Val = select.options[select.selectedIndex].value;
url=Url[Val]
window.open(url)
}}}
xhr.open('GET', target+'?page=2', true);
xhr.send(null);
}}
//--------------------------------------------------------
//抓第三頁的標題&網址
async function C(){if (Page>2){

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {

parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, "text/html");

select.addEventListener("change", OpenNew3);

//迴圈

chunks=doc.querySelectorAll(" h3 > a")

for (i=20;i<chunks.length+20;i++){
option1=doc.createElement('option')
option1.innerText=chunks[i-20].innerText
option1.value=i
Url.push(chunks[i-20].href)
select.appendChild(option1)
}

function OpenNew3()
{
  const Val = select.options[select.selectedIndex].value;
url=Url[Val]
window.open(url)
}}}
xhr.open('GET', target+'?page=3', true);
xhr.send(null);

}}
setTimeout(() => {
  B();
}, "1000")
setTimeout(() => {
  C();
}, "2000")
}

});
})();

各位想要延伸的話可以自己刻選單：
參考w3h客制選單教學
https://www.w3schools.com/howto/howto_custom_select.asp