javaScript/js.DOM

Id로 요소 노드 취득

• Document.prototype.getElementById 메소드는 인수로 전달한 id어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환한다.
• getElementByid 메소드는 Document.prototype의 프로퍼티이다.
• 반드시 문서 노드 document를 통해 호출해야 한다.
• 문서 내에 중복된 id 값이 있을 경우, 첫번째 하나의 요소 노드만을 반환한다.
• 인수로 전달된 id 값을 갖는 요소가 존재하지 않으면, null을 반환한다.
• id 값과 동일한 이름의 전역 변수가 선언되어 있으면 노드 객체가 재할당되지 않는다.

태그 이름으로 요소 노트 취득

Document.prototype/Element.prototype.getElementsByTagName 메소드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다.

• getElementsByTagName 메소드는 여러개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
• 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우, getElementsByTagName 메소드는 빈 HTMLCollection 객체를 반환한다.

class로 요소 노드 취득

• Document.prototype/Element.prototype.getElementsByClassName 메소드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환한다.
• 인수로 전달할 class 값은 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
• 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
• 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우, getElementsByClassName 메소드는 빈 HTMLCollection 객체를 반환한다.

CSS 선택자로 요소 노드 취득

스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

* { ... }                   /* 전체 선택자: 모든 요소를 선택 */
p { ... }                   /* 태그 선택자: 모든 p 태그 요소를 모두 선택 */
#foo { ... }                /* id 선택자: id 값이 foo인 요소 모두*/    
.foo { ... }                /* class선택자: class값이 foo인 요소 모두*/

input[type=text] { ... }    
/* 어트리뷰트 선택자: input 요소중에 type 어트리뷰트 값이 text 요소 모두 */
div p { ... }
/* 후손 선택자: div 요소의 후손 요소 중 p 요소 모두*/
div > p { ... }
/* 자식 선택자: div 요소의 자식 요소 중 p 요소 모두*/
p + ul { ... }
/* 인접 형제 선택자: p 요소의 형제 요소중에 p 요소 바로 뒤에 위치하는 ul 요소*/
p ~ ul { ... }
/* 일반 형제 선택자: p 요소의 형제 요소중에 p 요소 뒤에 위치하는 ul 요소 모두*/
a: hover { ... }
/* 가상 클래스 선택자: hover 상태인 a 요소 모두*/

• Document.prototype/Element.prototype.querySelector 메소드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색하여 반환한다.

• 인수로 전달한 CSS선택자를 만족시키는 요소 노드가 여러개인 경우, 첫번째 요소 노드만 반환

• 존재하지 않으면 null 반환

• Document.prototype/Element.prototype.querySelectorAll 메소드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환한다.

• querySelectorAll 메소드는 여러 개의 요소 노드 객체를 갖는 DOM컬렉션 객체인 NodeList 객체를 반환한다.

• 요소가 존재하지 않는 경우, 빈 NodeList 객체를 반환한다.

• CSS 선택자가 문법에 맞지 않은 경우, DOMException 에러가 발생한다.

탐색 가능 여부 확인

• Element.prototype.matches 메소드는 인수로 전달된 선택자에 의해 특정 노드를 탐색 가능한지 확인한다.
• 이벤트 위임을 사용할 경우 유용하다.

HTMLCollection 과 NodeList

• HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다. (유사배열 객체이자 이터러블이다)
  for… of 문으로 순회가능하고, 스프레드 문법을 사용하여 간단한 배열로 변환할 수 있다.
• 노드 객체의 상태변화를 실시간으로 반영하는 살아있는 객체.
  • HTMLCollection 언제나 live 객체로 동작한다.
  • NodeList 과거의 정적 상태를 유지하는 non-live객체로 동작하지만 경우에 따라 live 객체로 동작하기도 한다.
• 노드 객체의 상태 변경과 상관없이 안전하게 DOM컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용해야한다.
  • HTMLCollection - forEach, map, filter, reduce
  • NodeList - forEach, item, entries, keys, values

노드 탐색

• DOM트리 상의 노드를 탐색할 수 있도록 Node, Element 인터페이스는 트리 탐색 프로퍼티를 제공한다.

• 노드 탐색 프로퍼티는 모두 접근자 프로퍼티이다.

  자식 노드 존재 확인

  • Node.prototype.hasChildNodes 불리언값 반환