[2019.03.16]使用DOM操作函数和CSS选择器来针对已有的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"”来讲方便了许多啊！

部分案例代码：

 /*
 Function to add some new buttons to the panel

 Input: *None*

 Returns: *None*

 Effects: add "to top", "to bottom", "find fail" and "find error" buttons

 Modified on Mar 2019 by Jack Lyu

 Advise / Next stage: remove functions and put these buttons inside the HTML pages
 */

 function addButtons() {
     //adding anchor to page
     var pageTop = document.createElement('a');
     pageTop.setAttribute("id", "top");
     var pageBottom = document.createElement('a');
     pageBottom.setAttribute("id", "bottom")
     var tableBody = document.getElementById("content");
     tableBody.insertBefore(pageTop, tableBody.firstChild);
     $(pageBottom).insertAfter(tableBody);

     //adding link to page
     var infoText = document.createElement('p');
     infoText.setAttribute("style", "font-size: 1em;margin:0 0 5px 5px");
     infoText.innerHTML = "Navigator v1.0<br><div style='color:red;>'>Error(s):" + window.counterError + " Fail(s):" + window.counterFail + "</div>";
     var toTop = document.createElement('a');
     toTop.setAttribute("href", "#top");
     toTop.setAttribute("onclick", "resetCounter('All')");
     toTop.setAttribute("style", "color:#333333;margin:5px 0 0 5px;border:2px solid #6CDFEA;");
     toTop.innerHTML = "To Top";
 
// 省略一部分

     panleBottom.insertBefore(toBottom, panleBottom.lastChild);

     //adding "find next fail" button function
     var failButton = document.createElement('div');
     failButton.setAttribute("style", "margin: 15px 0 0 5px;");
     var findNextFail = document.createElement('a');
     findNextFail.setAttribute("href", "javascript:void(233)");
     findNextFail.setAttribute("onclick", "findNext('tr.FAIL')");
     findNextFail.setAttribute("style", "color:#333333;border:3px solid #F02311;margin-left:5px;padding:5px 1.19em 5px 5px;width:30%;text-align:center");
     findNextFail.innerHTML = "Next FAIL";
     failButton.insertBefore(findNextFail, failButton.lastChild);
     //adding "Prev fail" button function
     var findFail = document.createElement('a');
     findFail.setAttribute("href", "javascript:void(233)");
     findFail.setAttribute("onclick", "findNext('tr.FAIL',false)");
     findFail.setAttribute("style", "color:#333333;border:3px solid #F02311;padding:5px 1.19em 5px 5px;width:30%;text-align:center");
     findFail.innerHTML = "Prev FAIL";
     failButton.insertBefore(findFail, failButton.lastChild);
 
// 省略一部分
 
     //add both button to panle
     panleBottom.insertBefore(errorButton, panleBottom.lastChild);
 }

 /*
 Function to locate target event

 Input: eventName

 Returns:  *None*
 */

 function findEvent(eventName) {
     var list = document.querySelectorAll(eventName);
     var tag = eventName.split(".")[1];
     for (let index = list.length - 1; index >= 0; index--) {
         list[index].setAttribute("id", tag + index);
         list[index].firstChild.setAttribute("style", "background-color:#FFC943")
     }
 }

 /*
 Function to find next event

 Input: eventName

 Returns:  *None*

 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)
 */

 function findNext(eventName, isNext) {
     var index;
     if (isNext == false) {
         addCounter(eventName, 2);
         findNext(eventName);
         return;
     }
     else if (eventName == 'tr.ERROR') {
         if (pointerError < 1) { resetCounter('tr.ERROR'); }
         index = counterError - pointerError;
         pointerError--;
     }
     else if (eventName == 'tr.FAIL') {
         if (pointerFail < 1) { resetCounter('tr.FAIL'); }
         index = counterFail - pointerFail;
         pointerFail--;
     }

     else { alert('Script findNext error, call maintainer for help.'); }
     document.querySelectorAll(eventName)[index].scrollIntoView({ block: "start", inline: "nearest" });
 }