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的主要内容,如果未能解决你的问题,请参考以下文章

js--原生js DOM操作(增删改差)

理清Js的各种遍历

JavaScript框架探索4——DOM遍历2

关于JavaScript的事件处理一些知识

js怎么获取iframe页面中的dom元素

js怎么获取iframe页面中的dom元素