[Javascript] Do it! 자바스크립트 입문 - 속성, 이벤트, 스타일 - (DOM)

공부단 7일차-2입니다.

 

HTML 태그 속성을 가져오거나 수정하는 함수 - getAttribute(), setAttribute()

먼저 수정하려면 앞에서 배운 접근하는 함수들을 사용해서 접근 후 수정을 하면 됩니다.

 

// 예시
document.querySelector("접근하려는 요소").getAttribute("속성명") // 해당 속성에 접근
document.querySelector("접근하려는 요소").setAttribute("속성명", "속성값")

 

DOM에서 이벤트 처리하기

이벤트를 처리하려면 이벤트 헨들러가 필요합니다. 이벤트 헨들러란 이벤트와 이벤트 처리 함수를 연결해 주는 것입니다. 이벤트 헨들러는 이벤트 이름 앞에 on을 붙여서 사용합니다. (예를 들어 click 이벤트면 onclick="이벤트 함수")

 

var 변수명 = document.querySelector("이벤트가 있는 id or class or 태그")
변수명.on이벤트명 = 이벤트 함수

function 이벤트 함수() {
	...
}

 

이런식으로 이벤트를 처리할 수 있지만 이렇게 하면 하나의 이벤트 헨들러만 사용할 수 있습니다.

 

여러 이벤트를 한번에 처리하는 addEventListener()

// 웹 문서 어디를 클릭해도 "Hello Javascript"라는 알림 창이 뜨는 이벤트 함수
document.addEventListener("click", function() {
	alert("Hello Javascript")
})

 

DOM으로 스타일 수정

// document.querySelector("수정할 요소").style.수정할스타일속성 = "수정값"
document.querySelector("#heading").style.backgroundColor = "black"

 

DOM 요소 추가

함수	설명
createElement()	새 요소 노드 생성
createTextNode()	텍스트 내용이 있을 경우 텍스트 노드 생성
appendChild()	텍스트 노드를 요소 노드에 자식 노드 추가
createAttribute()	요소에 속성이 있을 경우 속성 노드 생성
setAttributeNode()	속성 노드를 요소 노드에 연결
appendChild()	새로 만든 요소 노드를 부모 노드에 추가