JS点击获取DOM节点

<style>
	@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #303030;
		background: #f0f0f0;
		font-family: "Montserrat", sans-serif;
	}

	.selector {
		margin-bottom: 30px;
	}

	article {
		width: 250px;
		background: #fefefe;
		border-radius: 5px;
		overflow: hidden;
	}

	.figure {
		width: 100%;
		height: 150px;
	}

	.figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.article-body {
		padding: 15px;
	}

	.article-title {
		text-transform: uppercase;
	}

	.article-text {
		margin: 15px 0 30px;
		font-size: 0.85rem;
		line-height: 1.5;
		letter-spacing: 0.25px;
	}

	button {
		appearance: none;
		outline: none;
		border: none;
		padding: 8px 12px;
		background: blueviolet;
		color: #fefefe;
		font-family: "Montserrat", sans-serif;
		font-size: 0.75rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		border-radius: 3px;
		cursor: pointer;
	}
</style>
<div class="selector"></div>

<article>
	<figure class="figure">
		<img src="https://images.unsplash.com/photo-1547082299-de196ea013d6?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTd8fGNvbXB1dGVyfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
			alt="Article-Image">
		<figcaption class="figure-caption"></figcaption>
	</figure>
	<div class="article-body">
		<h2 class="article-title">TITLE</h2>
		<p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure nemo incidunt, similique
			blanditiis in quidem.</p>
		<button class="btn" type="button">READ MORE</button>
	</div>
</article>
<script>
	function generateSelector(context) {
		let index, pathSelector, localName;

		if (context == "null") throw "not an dom reference";
		// call getIndex function
		index = getIndex(context);

		while (context.tagName) {
			// selector path
			pathSelector = context.localName + (pathSelector ? ">" + pathSelector : "");
			context = context.parentNode;
		}
		// selector path for nth of type
		pathSelector = pathSelector + `:nth-of-type(${index})`;
		return pathSelector;
	}

	// get index for nth of type element
	function getIndex(node) {
		let i = 1;
		let tagName = node.tagName;

		while (node.previousSibling) {
			node = node.previousSibling;
			if (
				node.nodeType === 1 &&
				tagName.toLowerCase() == node.tagName.toLowerCase()
			) {
				i++;
			}
		}
		return i;
	}

	// load document
	document.addEventListener("DOMContentLoaded", () => {
		// click on element to get output
		document.body.addEventListener("click", (e) => {
			let selector = document.querySelector(".selector");
			// selector output
			let output = generateSelector(e.target);

			selector.innerHTML = `<strong>Selector:</strong> ${output}`;

			// element that you select
			let element = document.querySelector(output);
			console.log("Selected Element:", element);
		});
	});
</script>