Only Fire an Event Once

const elem = document.querySelector('button');
elem.addEventListener("click", ()=> {
 console.log("Hello world");
}, { once: true });

Detect a Click Outside a Target Element

const elem = document.querySelector('div');
elem.addEventListener('click', (e) => {
 const outsideClick = !elem.contains(e.target);
  
 console.log(outsideClick); //returns true or fasle
});

Get The Computed Styles

const elem = document.querySelector('h2');
const cssObj = window.getComputedStyle(elem, null);
//returns a CSS object
//get a css value of the element from the object
h2Color = cssObj.getPropertyValue('color');
console.log(h2Color); //returns rgb(0, 0, 0).

Find Which Element the User Clicked

<!DOCTYPE html>
<html>
	<body>
		<button class="btn1">First button</button>
		<button class="btn2">Second button</button>
		<script>
			document.querySelectorAll("button").forEach(el => {
			 el.addEventListener("click", ()=>{
			  console.log(el.closest("button"));
			 })
			});
		</script>
	</body>
</html>

Clone a DOM Element

<!DOCTYPE html>
<html>
	<body>
	<div class="container">
	  <button class="btn1">First button</button>
	  <button class="btn2">Second button</button>
	</div>
	<script>
		const elem = document.querySelector(".container");
		const clone = elem.cloneNode(true);
		console.log(clone.outerHTML);
		/*
		returns
		<div class="container">
		  <button class="btn1">First button</button>
		  <button class="btn2">Second button</button>
		</div>
		*/
		</script>
	</body>
</html>

Scroll an Element Into View

const btn = document.querySelector("button");
const elem = document.querySelector(".container");
btn.addEventListener('click', ()=>{
 elem.scrollIntoView({behavior: "smooth", block: "center"});
});

참고

6 Awesome JavaScript DOM Tips and Tricks You Should Know