ES6 - 原生js遍历DOM - document.querySelectorAll(‘.xx‘)给DOM元素添加删除类名 - dom.classList.add切换类名toggle
Posted Rudon滨海渔村
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 - 原生js遍历DOM - document.querySelectorAll(‘.xx‘)给DOM元素添加删除类名 - dom.classList.add切换类名toggle相关的知识，希望对你有一定的参考价值。
原生js遍历DOM
原生js给DOM元素添加、删除类名
// 获取所有xxx类的DOM
var doms = document.querySelectorAll('.xxx');
// 遍历
doms.forEach((one)=>
// 添加类名
one.classList.add('colorRed');
// 删除类名
one.classList.remove('colorRed');
// 来回切换类名
one.classList.toggle('colorRed');
)JS复制DOM、增加代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复制DOM</title>
</head>
<body>
<!-- 已选择的文件列表 -->
<div id="wrapperRows">
</div>
<a class="button" onclick="copydom();"> 增加一行 </a>
<!-- 隐藏 - 用于复制的区域 -->
<div style="display: none;">
<div id="oneRowWrapper">
<div class="oneItemRow box rowSpaceBetween colAlignItemsCenter" data-iid="0">
<div class="col">
<div class="rowStart">
<div style="padding-right: 10px;">
<!-- pdf icon -->
<img style="height: 50px;" src="./img/icons/pdf.png" />
</div>
<div>
<span class="filenameSpan"></span>
</div>
</div>
</div>
<div class="col" onclick="removeItem(this.dataset.iid)">
<!-- 删除按钮 -->
<img style="height: 20px;" src="./img/icons/delete.png" />
</div>
</div>
</div>
</div>
<script>
function copydom()
// 改DOM
document.getElementById('oneRowWrapper').querySelector(".oneItemRow").dataset.iid = '10086';
document.getElementById('oneRowWrapper').querySelector(".filenameSpan").innerHTML = 'xxxx合同.pdf';
// 复制DOM
let oneI = document.getElementById('oneRowWrapper').querySelector(".oneItemRow").cloneNode(true);
// 插入DOM
document.getElementById('wrapperRows').appendChild(oneI);
</script>
</body>
</html>封面
以上是关于ES6 - 原生js遍历DOM - document.querySelectorAll(‘.xx‘)给DOM元素添加删除类名 - dom.classList.add切换类名toggle的主要内容，如果未能解决你的问题，请参考以下文章