DOM Manipulate 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>

Attribute

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

// true
console.log(a.hasAttribute('href'))

// /link1
console.log(a.getAttribute('href'))

a.setAttribute('target', '_blank')
// <a href="/link1" target="_blank">LINK 1</a>
console.log(a.outerHTML)

const attrs = a.attributes

// /link1
console.log(attrs.href.value)

// { "href": "/link1", "target": "_blank" }
console.log(Object.fromEntries(Array.from(attrs, a => [ a.name, a.value ])))

a.removeAttribute('href')
// <a target="_blank">LINK 1</a>
console.log(a.outerHTML)

Class

const a = document.querySelector('#c-box > .box > a')
const cl = a.classList

cl.add('active')

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

// true
console.log(cl.contains('active'))

cl.toggle('active')
// false
console.log(cl.contains('active'))
// <a href="/link1" class="">LINK 1</a>
console.log(a.outerHTML)

cl.toggle('active')
// <a href="/link1" class="active">LINK 1</a>
console.log(a.outerHTML)

// ['active']
console.log(Array.from(a.classList.values()))

cl.replace('active', 'disable')
// <a href="/link1" class="disable">LINK 1</a>
console.log(a.outerHTML)

cl.remove('disable')
// <a href="/link1" class="">LINK 1</a>
console.log(a.outerHTML)

Style

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

a.style.display = 'none'

// <a href="/link1" style="display: none;">LINK 1</a>
console.log(a.outerHTML)

// false
console.log(a.checkVisibility())

a.style.removeProperty('display')

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

// true
console.log(a.checkVisibility())

Data

const a = document.querySelector('#c-box > .box > a')
a.dataset.id = '1'

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

// { "id": "1" }
console.log({ ... a.dataset })

delete a.dataset.id

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