打好地基才能有更好的广度和深度发展
JS基础:
1.js控制DOM的增删查(和VUE的配合记忆)
增
var par = document.createElement("p");// 创建片段
var node = document.createTextNode('这是节点内容');// 创建节点
par.appendChild(node)
查(getElementxxx())和删(removeChild())
var parent = document.getElementById('parent');// 找到对应的节点
var child = document.getElementVyId('child');// 找到对应的子节点
parent.removeChild(child);// 移除子节点
关于vue操作DOM元素的方法
一般来说vue都是渲染DOM(数据驱动),不需要操作DOM,但不可避免有极端情况
this.$refs
配合目标元素的ref
使用
我遇到的vue操作DOM的情况 - 其实还是使用js操作的DOM
是在切换tab时,params.orderBy已经被重置’'了,已经取消表格的排序功能了,所以要清除表头的排序样式,
使用js操作DOM,清除样式
/**
* 清除点击切换step===0时,库存排序的className('descending','ascending')
* 原因:这个时候params.orderBy已经手动重置为''了,对应的排序按钮选中颜色的className清除
*/
var selfClassName = document.getElementsByClassName("is-sortable sortChangeClassName");
var hasDescendingClassNameStt = false;
var hasAscendingClassNameStt = false;
for(var a =0;a<selfClassName.length;a++){
// 清除倒序className
hasDescendingClassNameStt = selfClassName[a].classList.contains('descending');
if(hasDescendingClassNameStt){
selfClassName[a].classList.remove('descending')
}
// 清除正序className
hasAscendingClassNameStt = selfClassName[a].classList.contains('ascending');
if(hasAscendingClassNameStt){
selfClassName[a].classList.remove('ascending')
}
}
this.getList();