开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

2022年度考核又开始了，今年人事的同样是某卷星发起问卷让我们点几百下鼠标，需要对每名同事进行四个等级（优秀、合格、基本合格、不合格）的互评。几百个同事，点点点几百下我是不愿意的，大部分是默认选优秀的，那么宁愿写代码。

500下鼠标❌
5行代码✅

图片.png

在这里直接贴上关键代码，全选优秀，放上关键JS代码和动图。

let dvalArr = document.querySelectorAll('[dval="1"]');
for(let one of dvalArr){
	one.classList.add('rate-on');
	one.classList.add('rate-ontxt');
}

一、页面HTML结构分析

页面禁止了鼠标右键查看HTML元素，直接按F12调用控制台可以查看源代码。
复制关键HTML到代码编辑器中，方便对比发现规律。针对每个同事评价的每行HTML代码结构如下：

图片.png

在这里我们可以看出每个选项使用的是td>a,四个评价等级选项都具备关键字 dval="数值",观察特征： 1、当单选框被选中时，增加了样式class="rate-on rate-ontxt"
2、四个单选框的dval="数值"分别是1优秀、2合格、3基本合格、4不合格

基于以上两点，那么我们可以根据dval="1"找到页面上所有的优秀单选框，让他们全部选中，即添加样式class="rate-on rate-ontxt" ，到这里我们实现了全选优秀的功能。

let dvalArr = document.querySelectorAll('[dval="1"]');//根据特征选中 “优秀”单选框
for(let one of dvalArr){ //循环增加样式
   one.classList.add('rate-on');
   one.classList.add('rate-ontxt');
}

那么我有的不想选为优秀怎么办？关小黑屋

图片.png

二、非优秀小黑屋名单

默认大部分同事都是优秀，那么我们必然需要一些变量存放合格、基本合格、不合格的名单。
这里我们用三个数组。

let aArr = ['关羽'];//合格
let bArr = ['张飞','魏延','黄忠'];//基本合格
let cArr = ['刘备','赵云','诸葛亮'];//不合格

通过ES6数组的，数组.includes(姓名) 来判断名字是否在以上名单中。
保持代码的主结构不变，添加以下代码：

let dvalArr = document.querySelectorAll('[dval="1"]');
for(let one of dvalArr){
	one = pickOne(one);
	one.classList.add('rate-on');
	one.classList.add('rate-ontxt');
}

function pickOne(one){
	let tr  = one.parentNode.parentNode;
	//获取 文本节点 ，这里可能含有\n\t\t\t刘备 
	let str =tr.querySelector('.itemTitleSpan').childNodes[0].data;
	let name = str.trim();	//使用trim过滤空格和 缩进、回车换行符
	if(aArr.includes(name)){
		one = tr.querySelector('[dval="2"]')
	}else if(bArr.includes(name)){
		one = tr.querySelector('[dval="3"]')
	}else if(cArr.includes(name)){
		one = tr.querySelector('[dval="4"]')
	}
	
	return one;
}

因为有了名单，对于每个名字我们都需要进行判断:
1.若和（合格、基本合格、不合格）名单中吻合，那么改变当前单选元素
2.否则默认是优秀的，仍然选中当前单选按钮

图片.png

在代码中，我们通过DOM节点进行修改，从当前优秀节点dval="1"出发。
优秀单选框.parentNode.parentNode就是tr元素。
如果是 合格，那么就获取dval="2"的单选框;
如果是 基本合格，那么就获取dval="3"的单选框;
如果是 不合格，那么就获取dval="4"的单选框。

图片.png 我们再通过tr.querySelector('.itemTitleSpan').childNodes[0]
获取文本节点，使用trim()过滤掉空格、换行等特殊符号
获取以下同事的纯纯的文本姓名，就是因为目标文本多了<br>，所以要特别小心

<span class="itemTitleSpan">
  刘备<br>
</span>

图片.png

测试用例的代码。HTML+JS,放到同一个文件中如上图查看控制台。

<div id="A">
   <span>
     加油<br>
   </span>
</div>


let arr = [];

let A =  document.querySelector("#A");
console.log(A.childNodes)	//NodeList(3) 
console.log(A.children)		//HTMLCollection
console.log(A.children[0])	//span
console.log(A.children[0].innerHTML)//\n\t\t\t加油<br>\n\t\t
console.log(A.children[0].innerText)//加油\n
arr.push(A.children[0].innerHTML)
arr.push(A.children[0].innerText)
console.log(arr)

console.log(A.children[0].childNodes)//NodeList(2) 文本节点 br
console.log(A.children[0].childNodes[0].data.trim())	

console.log(A.children[0].children)	// <br>

三、总结和尝试

程序思维就是习惯用代码解决日常问题，特别小心纯文本节点的获取，
复制完整代码去以下地址试试吧。

图片.png

2022同事互评测试地址

let aArr = [];//合格
let bArr = ['张飞','魏延','黄忠'];//基本合格
let cArr = ['诸葛亮'];//不合格

let dvalArr = document.querySelectorAll('[dval="1"]');
for(let one of dvalArr){
	one = pickOne(one);
	one.classList.add('rate-on');
	one.classList.add('rate-ontxt');
}

function pickOne(one){
	let tr  = one.parentNode.parentNode;
	//获取 文本节点 ，这里可能含有\n\t\t\t刘备 
	let str =tr.querySelector('.itemTitleSpan').childNodes[0].data;
	let name = str.trim();	//使用trim过滤空格和 缩进、回车换行符
	if(aArr.includes(name)){
		one = tr.querySelector('[dval="2"]')
	}else if(bArr.includes(name)){
		one = tr.querySelector('[dval="3"]')
	}else if(cArr.includes(name)){
		one = tr.querySelector('[dval="4"]')
	}
	
	return one;
}

同事互评点500下鼠标❌，5行代码✅

一、页面HTML结构分析

二、非优秀小黑屋名单

三、总结和尝试