[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') 

document.querySelectorAll('tagName.className')

真的是很方便了。实际案例在下面！

还值得一提的是，这个方法相比于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" });

 }