chapter.05 DOM 메서드 및 속성

 

DOM에는 다양한 메서드와 속성 등이 존재한다.

이 메서드들과 속성은 어디에서 온 것일까 하고 고민해 봤는데, html을 객체화 하면서 관련 내용들이 모두 객체로서 사용할 수 있게 되었다고 한다.

그래서 그 객체를 자바스크립트로 불러와 제어하고 수정할 수 있다고 한다.

결국 DOM은 html 요소를 객체화 한 것의 집합체라고 보면 된다.

우리가 자바스크립트 엔진에서 함수와 메서드들을 꺼내와서 사용하는 것처럼, DOM에서도 가지고 와서 쓰는 것 뿐이다.

 

다만, 자바스크립트에서 작성 할 때는 window. 을 써서 어디서부터 온 메소드와 함수인지를 적어주는 것이고 (이는 안 써도 된다 / 이미 내장되어있어서 )

 

DOM에서 가지고 와서 작성할 때에는 구별하기 위해 document. 를 적어주는 것이다.

 

관련해서 자주 쓰는 정보들을 모아 정리해 보았다. ( GPT 이용 )

 

 

1. DOM 메서드 

 

1 ) 요소 찾기 관련 메서드

메서드	설명	예제
getElementById(id)	특정 ID를 가진 요소를 반환	document.getElementById('header')
getElementsByclassname(class)	특정 클래스를 가진 요소들을 반환 (HTML Collection)	document.getElementsByClassName('box')
getElementsByTagName	특정 태그 이름을 가진 요소들을 반환 (HTML Collection)	getElementsByTagName('div')
querySelector(selector)	CSS 선택자와 일치하는 첫 번째 요소를 반환	document.querySelector('.box')
querySelectorAll(selector)	CSS 선택자와 일치하는 모든 요소를 반환 (NodeList)	document.querySelectorAll('.box')

 

 

2) 요소 생성 및 추가 관련 메서드

메서드	설명	예제
createElement(tag)	새로운 HTML 요소를 생성	document.createElement('div')
createTextNode(text)	새로운 텍스트 노드를 생성	document.createTextNode('Hello!')
appendChild(node)	부모 요소에 자식 노드를 추가	parent.appendChild(child)
append(...nodesOrStrings)	요소나 텍스트를 부모 요소의 끝에 추가	parent.appendChild('Text', childNode)
insertBefore(newNode, referenceNode)	특정 노드 앞에 새 노드를 삽입	parent.inserBefore(newNode, ref)

 

 

3) 요소 삭제 및 교체 관련 메서드

메서드	설명	예제
removeChild(node)	부모 요소에서 특정 자식 노드를 제거	parent.removeChild(child)
replaceChild(newNode,oldNode)	기존 노드를 새로운 노드로 교체	parent.replaceChild(newNode,old)
remove()	요소 자체를 DOM에서 제거(ES6+)	element.remove()

 

 

4) 요소 정보 가져오기 관련 메서드

메서드	설명	예제
getAttribute(name)	특정 속성의 값을 반환	element.getAttribute('class')
setAttrbute(name,value)	특정 속성을 추가하거나 값을 설정	element.setAttribute('id','mycat')
removeAttribute(name)	특정 속성을 제거	element.removeAttribute('id')
hasAttribute(name)	특정 속성이 있는지 확인	element.hasAttribute('id')

 

 

---

 

 

2. DOM 속성

 

1 ) 요소 정보 관련 속성

속성	설명	예제
innerHTML	요소의 html 내용을 반환하거나 설정	element.innerHTML = '<p>Hello!</p>'
innerText	요소의 텍스트 내용을 반환하거나 설정	element.innerText = 'Hello!'
textContent	텍스트 내용을 반환하거나 설정 (html 태그 무시)	element.textContent = 'Hello!'
outerHTML	요소 자체와 내부 html 반환	console.log(element.outerHTML)
id	요소의 ID를 반환하거나 설정	element.id = 'header'
className	요소의 클래스를 반환하거나 설정	element.className = 'box'
classList	클래스의 추가/제거/토글을 위한 객체	element.classList.add('active')

 

 

2 ) 위치와 크기 관련 속성

속성	설명	예제
offsetTop	요소의 위쪽 위치 ( 부모 요소 기준 )	console.log(element.offsetTop)
offsetLeft	요소의 왼쪽 위치 ( 부모 요소 기준 )	console.log(element.offsetLeft)
offsetWidth	요소의 너비 ( 픽셀 단위, 패딩 포함 )	console.log(element.offsetWidth)
offsetHeight	요소의 높이 ( 픽셀 단위, 패딩 포함 )	console.log(element.offsetHeight)

 

 

3 ) 속성과 스타일 관련 속성

속성	설명	예제
attributes	요소의 모든 속성을 반환 (NamedNodeMap)	console.log(element.attributes)
style	요소의 CSS 스타일을 설정하거나 반환	element.style.color = 'red'
dataset	data-* 속성 접근을 위한 객체	element.dataset.info = 'value'

 

 

---

 

 

3. DOM 이벤트 관련 메서드

이벤트를 설정하거나 관리하는 메서드도 DOM 메서드에 포함된다.

 

메서드	설명	예제
addEventListener(type, listener)	특정 이벤트에 대한 리스너 추가	button.addEventListener('click', () => alert('Clicked!'))
removeEventListener(type, listener)	리스너 제거	button.removeEventListener('click', myFunction)
dispatchEvent(event)	이벤트를 트리거	element.dispatchEvent(new Event('customEvent'))