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

attr()

Description

Sets a single or multiple attributes of the elements within the collection

Syntax

// set a single attribute to the collection
collection.attr(attributeName, attributeValue);

// sets multiple attributes to the collection
collection.attr({
   attributeName1: attributeValue1,
   attributeName2: attributeValue2,
   attributeName3: attributeValue3,
});

Parameters

attributeName - can be a String containing the attribute name you want to get or set, or an Object Literal containing the attributeName and attributeValue pairs.

attributeValue (Optional) - a String containing the attribute value you want to set if you have passed a String on the attributeName parameter.

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='menuList'>
				<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>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let collection = $.qsa('.menuLink');

		// set a single attribute
		collection.attr('title','domExt is awesome!');
		console.log(collection);
		/* Result
			<li><a class='menuLink' title='domExt is awesome!'>Menu 1</a></li>
			<li><a class='menuLink' title='domExt is awesome!'>Menu 2</a></li>
			<li><a class='menuLink' title='domExt is awesome!'>Menu 3</a></li>
		*/

		// set multiple attributes
		collection.attr({
			hidden: '',
			draggable: true,
			dir: 'ltr'
		});
		console.log(collection);
		/* Result
			<li><a class='menuLink' title='domExt is awesome!' hidden draggable='true' dir='ltr'>Menu 1</a></li>
			<li><a class='menuLink' title='domExt is awesome!' hidden draggable='true' dir='ltr'>Menu 2</a></li>
			<li><a class='menuLink' title='domExt is awesome!' hidden draggable='true' dir='ltr'>Menu 3</a></li>
		*/
	</script>
</body>
</html>