2018年末知识回顾:基础知识篇-优快云博客

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/86590039

本文深入探讨JavaScript操作DOM的基本方法，包括元素的增删查改，并结合Vue框架中的实际应用案例，展示如何在特定场景下利用原生JS与Vue交互进行DOM操作，特别聚焦于清除表头排序样式的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打好地基才能有更好的广度和深度发展

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();