2018年末知识回顾:基础知识篇

本文深入探讨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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值