들어가기에 앞서..
첫 자바스크립트를 접할때 const, let 등을 배웠다.
기본중에 기본이긴 하지만 자바 스크립트를 접할때 document.getElementById 등 document. 의 요소들을 작성하는것을 많이 보았다. 기초라고 생각되는 내용이지만 중반부에서 접할수 있어서 아이러니 했다. 그래서 나는 첫번째 JS공부를 DOM부터 작성해 본다.
오늘은 무엇을 배울까 ?
DOM, DOM요소에 접근하기 (document.getElementById/document.querySelector)
탐색(parentNode ,firstChild, lastChild)
DOM (Document Object Model)
모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다
DOM은 HTML, ECMAScript에서 정의한 표준이 아닌 별개의 W3C의 공식 표준이며 플랫폼/프로그래밍 언어 중립적이다. DOM은 다음 두 가지 기능을 담당한다.
HTML 문서에 대한 모델 구성
브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.
HTML 문서 내의 각 요소에 접근 / 수정
DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.
DOM tree
브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 트리 형태로 구조화 되어 있기 때문에 DOM tree라고 부른다.
DOM tree는 네 종류의 노드로 구성된다
문서 노드(Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.
요소 노드(Element Node)
요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.
어트리뷰트 노드(Attribute Node)
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다.
텍스트 노드(Text Node)
텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.
요소에의 접근
하나의 요소 노드 선택
document.getElementById(id)
id 값의 요소 노드를 한개 선택한다. 복수개일 경우 첫번째만 반환
const oneNode = document.getElementById('one');document.querySelector(cssSelector)
CSS 셀렉터를 사용하여 요소 노드 한개를 선택한다. 복수개일 경우 첫번째만 반환
const oneNodeCss = document.querySelector('li.red');여러개의 요소 노드 선택
document.getElementsByClassName(class)
class의 값의 모든 요소를 선택한다. 공백을 구분하여 class 여러개를 지정할수있다.
const twoNode = document.getElementsByClassName('red');주의!
getElementsByClassName 메소드의 반환값은 HTMLCollection이다.
HTMLCollection은 실시간으로 Node의 상태 변경을 반영한다. (live HTMLCollection)
document.getElementsByTagName(tagName)
태그명으로 요소 노드를 모두 선택한다.
document.querySelectorAll(selector)
지정된 CSS 선택자를 사용하여 요소 노드를 모두 선택한다.
탐색 (DOM Traversing)
parentNode
부모 노드를 탐색한다.
요소를 선택하고 탐색하는 방식으로 사용된다.
const elem = document.querySelector('#two');
//요소를 선택 하고 할당.
elem.parentNode.className = 'blue';firstChild, lastChild
자식 노드를 탐색한다. IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 또는 줄바꿈 문자를 텍스트 노드로 취급하기 때문에 작동이 안될경우도 있다.
그래서 firstElementChild, lastElementChild를 사용한다.
const elem = document.querySelector('ul');
// first Child
elem.firstChild.className = 'red';
// last Child
elem.lastChild.className = 'black';hasChildNodes()
자식 노드가 있는지 확인하고 Boolean 값을 반환한다
childNodes
자식 노드의 컬렉션을 반환한다. 텍스트 요소를 포함한 모든 자식 요소를 반환한다.
children
자식 노드의 컬렉션을 반환한다. 자식 요소 중에서 Element type 요소만을 반환한다.
const elem = document.querySelector('ul');
if (elem.hasChildNodes()) {
console.log(elem.childNodes);
console.log(elem.children);생각보다 내용이 많고 이것들을 다 외워야 하나? 외울수 있나 생각이 들었다 지금은 이해하고 넘어가는 수준이지만 계속 사용하고 참고 하다보면 외울수 있을것 같은 기분도 든다. DOM 후반 내용은 다음 포스팅으로 이어서 작성하도록 하겠다.
