DOM Get Element

Sample HTML

<div id="c-box">
	<p class="box">
		<a href="/link1">LINK 1</a>
	</p>
	<p class="box">
		<a href="/link2">LINK 2</a>
	</p>
	<p class="box">
		<a href="/link3">LINK 3</a>
	</p>
</div>

Element

const cBox = document.querySelector('#c-box')

// The same as the above function.
const cBox2 = document.getElementById('c-box')

console.log(cBox.innerHTML)
console.log(cBox.outerHTML)

// DIV
console.log(cBox.tagName)
// c-box
console.log(cBox.id)

<p class="box"><a href="/box1">LINK 1</a></p>
<p class="box"><a href="/box2">LINK 2</a></p>
<p class="box"><a href="/box3">LINK 3</a></p>

<div id="c-box">
	<p class="box"><a href="/box1">LINK 1</a></p>
	<p class="box"><a href="/box2">LINK 2</a></p>
	<p class="box"><a href="/box3">LINK 3</a></p>
</div>

Elements

// Return NodeList
const cBoxes = document.querySelectorAll('.box')

// Return HTMLCollection
const cBoxes2 = document.getElementsByClassName('box')
const cBoxes3 = document.getElementsByTagName('p')

console.log(cBoxes[0].outerHTML)

cBoxes.forEach(e => console.log(e.outerHTML))

// [ERROR] forEach is not a function
cBoxes2.forEach(e => console.log(e.outerHTML))
cBoxes2.forEach(e => console.log(e.outerHTML))

<p class="box"><a href="/link1">LINK 1</a></p>

<p class="box"><a href="/link1">LINK 1</a></p>
<p class="box"><a href="/link2">LINK 2</a></p>
<p class="box"><a href="/link3">LINK 3</a></p>

Children

const cBox = document.querySelector('#c-box')
for (const child of cBox.children) {
	console.log(child.outerHTML)
}

<p class="box"><a href="/link1">LINK 1</a></p>
<p class="box"><a href="/link2">LINK 2</a></p>
<p class="box"><a href="/link3">LINK 3</a></p>

Find

const cBox = document.querySelector('#c-box')

const cBox = document.querySelector('#c-box')
const p = cBox.querySelectorAll('p')
const a = p[0].querySelector('a')

// <a href="/link1">LINK 1</a>
console.log(a.outerHTML)

Parent

const p = document.querySelector('#c-box').children
cl(p[0].parentElement.outerHTML)

<div id="c-box">
	<p class="box"><a href="/link1">LINK 1</a></p>
	<p class="box"><a href="/link2">LINK 2</a></p>
	<p class="box"><a href="/link3">LINK 3</a></p>
</div>

Closest

const a = document.querySelector('#c-box > p > a')
console.log(a.closest('div'))

<div id="c-box">
	<p class="box"><a href="/link1">LINK 1</a></p>
	<p class="box"><a href="/link2">LINK 2</a></p>
	<p class="box"><a href="/link3">LINK 3</a></p>
</div>

Next, Previous

const p = document.querySelector('#c-box').children
cl(p[1].outerHTML)
cl(p[1].nextElementSibling.outerHTML)
cl(p[1].previousElementSibling.outerHTML)

<p class="box"><a href="/link2">LINK 2</a></p>
<p class="box"><a href="/link3">LINK 3</a></p>
<p class="box"><a href="/link1">LINK 1</a></p>