原生JS快速获取和更改标签里面的属性值

今天看代码的时候遇到一个原生JS的知识点,下图的

code1  code2

this.id.split('-')[1]

/* 
这里的this是点击那个<button></button>整个对象代码
假设点击了第一个default的<button>
this.id = "switcher-default"
this.id.split('-') = [switcher,default]
this.id.split('-')[1] = "default"
*/

原生javascript扩展知识:

getAttribute:取得属性;
setAttribute:设置属性;

a[0].id
//"header"
a[0].className
//"Xman"
a[0].getAttribute('attrName');
//获取attrName的值,例如 title、style、data-XX等
a[0].setAttribute('attrName','value');
/*
设置attrName的值,在value处输入对应的值,这个value是直接覆盖原来的值,如果你设置了style,如果里面已经有一个样式了,你要加个背景就要在原有的值上加上背景的样式。
例:font-size:16px; 增加背景:font-size:16px; background:#ccccccc;
*/

 

console.log

code3