자바스크립트 공부(7) - 문서 객체 모델(DOM) (2)

DOM 요소의 속성 노드에 접근하면 HTML 요소의 속성 값을 원하는 값으로 수정할 수 있다.

---

1. HTML 태그 속성을 가져오거나 수정하기

---

• getAttribute() : 속성에 접근하기

• setAttribute() : 접근한 속성의 값 바꾸기. 괄호 안에 속성 이름과 값을 넣는다. 지정한 속성이 없다면 새로 추가하고, 지정한 속성이 있다면 괄호 안에 넣은 속성 값으로 수정한다.

  document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg")

  🔺 setAttribtue() 함수를 사용하여 이미지 경로 수정하는 예시

 

위의 태그에서 querySelectorAll("img")로 접근한 후 인덱스를 지정할 수도 있지만 이미지가 많은 문서일 경우에는 자식 선택자(>)를 이용해서 어떤 이미지인지 정확하게 지정하는 것이 좋다고 한다.

 

 

2. 이벤트 처리 방법

---

(1) HTML 태그 안에서 이벤트 처리기 연결하기

HTML 태그 안에 미리 선언한 함수를 연결한다. 이는 HTML 태그와 자바스크립트 소스가 섞여 있는 형태이기 때문에 이벤트를 바꾸거나 연결 함수를 꾸려면 HTML 소스를 수정해야 한다.

(2) DOM 요소에 이벤트 처리기 연결하기

이 방법은 이벤트 처리기를 자바스크립트 소스에서 실행한다. 요소를 변수에 저장한 후 이벤트가 발생했을 때 함수를 실행하는 형식으로 작성한다.

(3) addEventListener() 함수 사용하기

위의 방법들은 한 요소에 하나의 이벤트 처리기만 연결할 수 있다. 반면 addEventListener() 함수를 사용하면 한 요소에 여러 이벤트를 동시에 처리할 수 있다. 규모가 큰 프로그램일 경우 많이 사용하는 방법이다.

pic.addEventListener("이벤트 유형", 함수, 캡쳐 여부);

• 이벤트 유형 : 처리할 이벤트 유형 지정. 단 이벤트 유형 앞에 'on'을 붙이지 않는다.
• 함수 : 실행할 명령을 나열하거나 함수 이름을 지정한다.
• 캡쳐 여부 : 이벤트를 캡쳐링하는지 여부를 지정한다.

 

 

3. DOM으로 CSS 속성에 접근하고 수정하기

---

요소 다음에 .style 예약어를 쓰고 그 다음 CSS 속성을 적는다.

document.querySelector("#heading").style.color = "white"

background-color처럼 '-'이 포함된 속성은 backgroundColor와 같이 낙타 표기법으로 입력한다.

 

 

4. DOM에 요소 추가하기

---

앞서 우리는 DOM 트리에 다양한 노드 종류가 있다는 것을 배웠다. 웹 문서의 요소들은 태그뿐만 아니라 태그 속성과 내용을 함께 사용한다. 그래서 태그를 추가하고 싶다면 그 안에 있는 텍스트 내용과 속성도 노드로 추가해야 한다.

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

* 속성 노드를 추가할 때 createAttribute()와 setAttributeNode()를 사용하는 방법말고 setAttribute()를 사용할 수도 있다.

 

 

5. 추가한 노드 순서 바꾸거나 삭제하기

---

querySelecorAll() 함수를 사용해서 여러 개의 노드를 한꺼번에 가져와 저장되는 것을 노드 리스트라고 한다.

DOM 트리를 활용해 원하는 노드 다루기

DOM 트리는 여러 노드가 부모, 자식, 형제 관계를 맺고 있다. 이를 이용해서 원하는 노드에 접근할 수 있다.

• hasChildNodes() : 특정 노드에 자식 노드가 있는지 확인하는 함수
• childNodes() : 현재 노드의 자식 노드에 접근하는 함수. 요소 노드뿐 아니라 태그와 태그 사이 줄바꿈인 빈 텍스트 노드도 자식 노드로 인식한다. 요소에만 접근하려면 chidren 속성을 사용하면 된다.
• insertBefore() : appendChild() 함수는 마지막 자식 노드로 추가되지만 이 함수를 사용하면 기준이 되는 노드 앞에 자식 노드를 추가할 수 있다.

  tempList.insertBefore(tempList.children[2], nameList.children[0])

• removeChild() : 부모 노드에서 자식 노드를 삭제한다. 괄호 안에는 삭제하려는 자식 노드가 들어간다. 노드는 스스로 자신을 삭제할 수 없기 때문에 부모 노드에 접근한 후 삭제해야 한다. 이때 현재 속성의 부모 요소 노드를 반환하는 parentNode 속성을 사용해서 부모 노드를 찾을 수 있다.