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

发布时间：2023-09-06 02:35责任编辑：胡小海关键词：HTML

刚入职的时候看到公司用的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 event103 104 Input: eventName105 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改动？

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

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

知识推荐