[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"”来讲方便了许多啊！

 

部分案例代码：

  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

 

posted @ 2019-03-20 20:22  Approid  阅读(303)  评论(0)  编辑  收藏  举报