添加给DOM元素动态添加自定义属性(兼容IE)
我想在项目中动态添加一个元素, 但是这个元素的样式被自定义属性锁死了, 根据代码我去其相邻元素取的到d自定义属性, 但是在ie下没有作用, 根据代码调试发现, ie下的DOM结构与谷歌的不一样, 不一样的DOM结构最后输出的attribute的顺序不同, 然后我想到了自定义属性dataset的用法, 它会自动把data-xxx的属性收集起来作为自定义属性的集合对象.
// 相邻元素插入
insertAfter(newELement,targetElement ){
var parent = targetElement.parentNode;
if( parent.lastChild == targetElement ){
parent.appendChild( newELement );
}else{
// 只存在insertBefore()方法 , 往后插入元素使用下面方法
parent.insertBefore( newELement, targetElement.nextSibling );
}
},
// 模拟dataset
getDataSet(ele){
var attrs = ele.attributes,
expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
if(attrs[i].name.substring(0, 5) == 'data-') {
expense[attrs[i].name.substring(5)] = attrs[i].value;
}
}
return expense
},
// 给新元素绑定自定义属性
async getIPAddress() {
const data = await api.getClientIp({});
this.targetIp.ip = data;
const logo = document.getElementById('logo');
let span = document.createElement('span');
let targetDataKey = Object.keys(this.getDataSet(logo))['0'];
span.setAttribute(`data-${targetDataKey}`,'');
span.innerText = 'IPv6';
this.insertAfter(span,logo);
}