JavaScript - 문서 객체 모델 (DOM)

웹 요소 문서 접근

 

- 인터렉티브 한 기능을 추가하거나 움직임을 적용하기 위해서는?

-> css 같이 해당 요소에 접근해야함.

css는 선택자를 이용하여 HTML문서내의 요소에 접근

JavaScript DOM은 웹 브라우저와 HTML 문서의 모든 기능과 요소에 접근

 

-- 예전 방식

DOM 레벨 0

> Document 객체의 프로퍼티들로 문서 요소에 접근할 수 있게 해줌.

> 프로퍼티들은 배열 값을 가짐.

document.anchors[]
document.images[]
document.appplets[]
document.links[]
document.forms[]

 

name 속성

> 서식의 입력 폼을 포함한 대부분의 요소들은 대부분 name 속성을 가질 수 있음.

document.personalinfo.button. //버튼 접근

var genderEle = document.personalinfo.gender;
if(genderEle[0].checked){ alert(~~) }
else if(genderEle[1].checked) { alert(~~) }
//체크 창에 따라 경고창 뜸. true, false로 반환됨

 

 

 

 

-- 새로운 DOM

> HTML 문서의 모든 요소에 접근할 수 있게 하기 위해 문서를 트리로 표현.

> 중첩된 요소들은 부모와 자식관계로 계층화. 이를 각 노드(HTML요소, 도큐멘트, 텍스트, 속성까지 의미)라고 함. 이 노드를 기준으로 접근하는 방식을 제공.

 

 

1. 노드에 접근하는 방법

- getElemntsByTagName()

: Document객체의 프로퍼티로 HTML요소명(태그명)으로 노드에 접근

: 복수이면, 프로퍼티가 반환하는 노드객체가 배열로 반환.

 

 

- getElementById()

: 요소의 id속성 값으로 노드를 선택

: id속성은 유일한 값을 가지므로 하나의 노드만 반환함.

: 프로퍼티를 사용하려면 반드시 id 속성을 설정해야함. 의미있는 요소에만 설정하는 것을 권장.

 

위 둘로는 HTML의 모든 노드를 선택하기에는 어려움. 또한 텍스트 노드는 접근조차 할 수 없음.

 

DOM을 통해 접근한 노드를 기준으로 문서내의 노드를 순환할 수 있는 프로퍼티 제공

> 자식노드 접근

- childNode[] : 노드 객체의 자식 노드 목록을 배열로 반환

- firstChild, lastChild : 노드 객체의 첫 번째 자식 노드와 마지막 자식 노드를 반환

- 줄바꿈을 다음 텍스트 요소로 인식하니 주의할 것.

<li><span class = "listTitle">습관1 : </span> 주도적이 되라 </li>
// </span> 까지 : childNodes[0]
// 주도적이되라 가 : childNodes[1]
// </li>까지가 : childNodes[2]

 

> 노드 객체의 부모 노드에 접근

- parentNode 프로퍼티

> DOM 문서 트리내에 같은 계층에 있는 요소들에게 접근

- nextSibling : 형제 계층 또는 이웃 계층으로 불리는 같은 계층의 바로 다음 노드에 접근

- previousSibling : 바로 앞 노드에 접근

 

: getElemntsByTagName()j, getElementById()를 이용해서, 접근하려는 노드나 그 근처 노드에 접근.

  그 후, childNodes, parentNodes, first/lastNode, nextSibling 등으로 노드 선택

 

 

-  getElemntsByClassName()

: 요소의 class 속성 값을 이용해 노드 객체를 선택하는 프로퍼티가 표준화 됨.

: class 속성 : 같은 값을 가지는 요소가 여러개일 수 있어서 배열로 반환.

-  getElemntsByName()

: name 속성 값으로 노드객체에 접근 가능. 다른 내용은  getElemntsByClassName과 동일

- querySelectorAll()

: css셀렉터를 이용해 노드를 선택

: 일치하는 모든 노드를 배열로 반환.

: querySelector는 일치하는 첫번째 노드만 반환.

 

 

2. 웹문서의 조작

: 선택된 노드의 종류에 따라 다양한 조작.

-> 요소의 속성이나 CSS속성 변경

-> 입력 폼의 값을 읽거나 변경

-> 문서내에 새로운 HTML요소와 콘텐츠 삽입

 

- write/writeln

: document.write는 가장 쉽게 문서내에 콘텐츠 추가하는 방법

: 노드에 적용할 수 없음.

: 주의 사항 - 함수 내부에 사용하여 이벤트로 호출하면, 기존 문서 전체를 지워버리고 콘텐츠를 출력함.

     : 로딩완료 후 이벤트로 호출되면 기존 문서 다 지워버림.

: writeln은 줄바꿈이외에는 write와 동일. HTML에서는 줄바꿈을 무시하기 때문에 <pre> 요소를 포함하는 콘텐츠를 출력하기 전에는 결과가 write랑 동일

 

- 노드의 생성과 삽입

> createElement() / createTextNode() : 요소와 텍스트 노드 생성

> appendChild() : 특정노드의 자식으로 노드 삽입.

> insertBefore() : 특정 요소 앞에 삽입하기 위해 사용.(부모노드.insertBefore(삽입할 노드, 레퍼런스 노드))

> replaceChild() : 자식노드 중 특정 노드를 새로운 노드로 치환(부모노드.replaceChild(새로운 노드, 바뀔 노드))

 

- 생성한 노드의  class또는 id 속성 적용

> getAttribute(), setAttribute() 메소드 사용.

노드.get~~("속성명") : 노드의 속성값 가져옴.

노드.set~~("속성명", "속성값") : 노드의 속성을 속성값으로 설정.

 

>CSS변경

- CSS 정의가 되어있는 style 프로퍼티를 사용하면 접근한 노드의 CSS속성을 직접 적용하거나 변경 가능

 ex) 노드.style.css속성 = css 속성값

- 주의사항 

 : css 속성을 표시할 때 하이픈(-)은 모두 대문자표기로 바꿔주어야함.(background-color => backgroundColor)

 

 

- innerHTML

-> createElement()와 createTextNode(), appendChild()를 한꺼번에 처리하는 효과 발휘.

function console(outputString){
	document.getElementById("console").innerHTML = outputString;
}

=> id속성값이 console인 요소 내부에 outputString(HTML코드) 전달인자를 넣으라는 의미. 특정 요소 내부에 HTML 코드를 삽입하는 가장 빠른 방법