[Intern][2019.03.16]針對已有的HTML如何只憑JS改動？

剛入職的時候看到公司用的HTML日誌生成工具附帶的Panel，工具不夠用，找個Fail還要找半天，於是自己琢磨著添磚加瓦。以前也是個半吊子前端工程師，現在可倒好，想要改頁面卻連頁面生成的模板在哪裡都不知道，只有通過改動JavaScript才能實現對頁面的修改。

固然，操作DOM有原版的 

document.getElementsBy

一族，可是它們get的時候不能通過 class 和 標簽 來區分，比如：

<div class="FAIL">
    <tr class="FAIL">
        <td class="FAIL ">I am row NO.1</td>
        <td class="TRACE">I am row NO.2</td>
        <td class="DEBUG">I am row NO.3</td>
        <td class="ERROR">I am row NO.4</td>
    </tr>
</div>    

通過Class查找會找出一堆FAIL；通過Tag查找……算了吧；通過ID查找……好吧根本沒有定義過ID。

活人總不能被尿憋死，CSS3中增強了對選擇器的支持，新特性中有：

document.querySelector

函數家族，他們是：

document.querySelector('tagName.className') 

An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.(By MDN)

返回匹配輸入的CSS選擇器的第一個元素，如果沒有匹配的元素，返回空（null）。

document.querySelectorAll('tagName.className') 

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.(By MDN)

如果你需要找到所有的匹配元素，請使用querySelectorAll。

真的是很方便了。實際案例在下麵！

還值得一提的是，這個方法相比於Anchor，多了方便的動畫和滾動位置設定

document.querySelectorAll(eventName)[index].scrollIntoView({ behavior:"auto, "block: "start", inline: "nearest" });

三個屬性分別控制動畫、滾動到所選區域的哪裡，滾動到本頁面的哪裡。比起 “herf="#top"”來講方便了許多啊！

部分案例代碼：

  1 /*
  2 Function to add some new buttons to the panel
  3 
  4 Input: *None*
  5 
  6 Returns: *None*
  7 
  8 Effects: add "to top", "to bottom", "find fail" and "find error" buttons
  9 
 10 Modified on Mar 2019 by Jack Lyu
 11 
 12 Advise / Next stage: remove functions and put these buttons inside the HTML pages
 13 */
 14 
 15 function addButtons() {
 16     //adding anchor to page 
 17     var pageTop = document.createElement('a');
 18     pageTop.setAttribute("id", "top");
 19     var pageBottom = document.createElement('a');
 20     pageBottom.setAttribute("id", "bottom")
 21     var tableBody = document.getElementById("content");
 22     tableBody.insertBefore(pageTop, tableBody.firstChild);
 23     $(pageBottom).insertAfter(tableBody);
 24 
 25     //adding link to page 
 26     var infoText = document.createElement('p');
 27     infoText.setAttribute("style", "font-size: 1em;margin:0 0 5px 5px");
 28     infoText.innerHTML = "Navigator v1.0<br><div style='color:red;>'>Error(s):" + window.counterError + " Fail(s):" + window.counterFail + "</div>";
 29     var toTop = document.createElement('a');
 30     toTop.setAttribute("href", "#top");
 31     toTop.setAttribute("onclick", "resetCounter('All')");
 32     toTop.setAttribute("style", "color:#333333;margin:5px 0 0 5px;border:2px solid #6CDFEA;");
 33     toTop.innerHTML = "To Top";
 
// 省略一部分

 42     panleBottom.insertBefore(toBottom, panleBottom.lastChild);
 43 
 44     //adding "find next fail" button function
 45     var failButton = document.createElement('div');
 46     failButton.setAttribute("style", "margin: 15px 0 0 5px;");
 47     var findNextFail = document.createElement('a');
 48     findNextFail.setAttribute("href", "javascript:void(233)");
 49     findNextFail.setAttribute("onclick", "findNext('tr.FAIL')");
 50     findNextFail.setAttribute("style", "color:#333333;border:3px solid #F02311;margin-left:5px;padding:5px 1.19em 5px 5px;width:30%;text-align:center");
 51     findNextFail.innerHTML = "Next FAIL";
 52     failButton.insertBefore(findNextFail, failButton.lastChild);
 53     //adding "Prev fail" button function
 54     var findFail = document.createElement('a');
 55     findFail.setAttribute("href", "javascript:void(233)");
 56     findFail.setAttribute("onclick", "findNext('tr.FAIL',false)");
 57     findFail.setAttribute("style", "color:#333333;border:3px solid #F02311;padding:5px 1.19em 5px 5px;width:30%;text-align:center");
 58     findFail.innerHTML = "Prev FAIL";
 59     failButton.insertBefore(findFail, failButton.lastChild);
 
// 省略一部分
 
 80     //add both button to panle
 81     panleBottom.insertBefore(errorButton, panleBottom.lastChild);
 82 }
 83 
 84 /*
 85 Function to locate target event
 86 
 87 Input: eventName
 88 
 89 Returns:  *None*
 90 */
 91 
 92 function findEvent(eventName) {
 93     var list = document.querySelectorAll(eventName);
 94     var tag = eventName.split(".")[1];
 95     for (let index = list.length - 1; index >= 0; index--) {
 96         list[index].setAttribute("id", tag + index);
 97         list[index].firstChild.setAttribute("style", "background-color:#FFC943")
 98     }
 99 }
100 
101 /*
102 Function to find next event
103 
104 Input: eventName
105 
106 Returns:  *None*
107 
108 Notice: Only work on some browsers: Chorme 29 and above(animation work on 61 above), IE8 and above, Firefox 1 and above(animation work on 36 above)
109 */
110 
111 function findNext(eventName, isNext) {
112     var index;
113     if (isNext == false) {
114         addCounter(eventName, 2);
115         findNext(eventName);
116         return;
117     }
118     else if (eventName == 'tr.ERROR') {
119         if (pointerError < 1) { resetCounter('tr.ERROR'); }
120         index = counterError - pointerError;
121         pointerError--;
122     }
123     else if (eventName == 'tr.FAIL') {
124         if (pointerFail < 1) { resetCounter('tr.FAIL'); }
125         index = counterFail - pointerFail;
126         pointerFail--;
127     }
128 
129     else { alert('Script findNext error, call maintainer for help.'); }
130     document.querySelectorAll(eventName)[index].scrollIntoView({ block: "start", inline: "nearest" });
131 }
132