码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-03-20 20:40:03      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:event   ISE   creat   one   fun   hat   count   ntb   cto   

刚入职的时候看到公司用的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

 

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

标签:event   ISE   creat   one   fun   hat   count   ntb   cto   

原文地址:https://www.cnblogs.com/jackablack/p/10567368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!