HTMLCollection and Nodelist changeClass() - KirkGarcia182/domExtend GitHub Wiki

changeClass()

Description

Changes a class from all the elements within the collection to a new class.

Syntax

collection.changeClass(from, to)

Parameters

from - A String representing the class name within the collection that will be replaced.

to - A String representing the class name that will replace the old class name from each elements within the collection.

Return Value

The collection you just manipulated so you can chain these methods.

Example

<!DOCTYPE html>
<html>
<head>
	<title>domExt Examples</title>
</head>
<body>
	<div id="app">
		<div class="menus">
			<ul id='menuList1'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
			<ul id="menuList2"></ul>
			<ul id="menuList3"></ul>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let collection = $.qsa('.menuLink');
		collection.addClass('class1');
		
		collection.changeClass('class1', 'class2');
		console.log(collection);
		/* Result
			<li><a class='menuLink class2'>Menu 1</a></li>
			<li><a class='menuLink class2'>Menu 2</a></li>
			<li><a class='menuLink class2'>Menu 3</a></li>
		*/

		
	</script>
</body>
</html>