[Intern][2019.03.16]针对已有的HTML如何只凭JS改动？

document.getElementsBy

<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>    

document.querySelector

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

  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