[javascript] DOM과 자바스크립트 정리

DOM과 자바스크립트

DOM이란?

NODE의 클래스 계층

https://68.media.tumblr.com/5409e7d06eb7bc0066a56ec190d4224b/tumblr_os9ddhqzHy1v80c66o1_1280.jpg

‘Element’ 객체 선택하기

// 1. Id - '하나'의 Element 객체가 선택됨
var foo1 = document.getElementById("idName");

// 2. class - '복수'의 Element 객체가 선택됨
var foo2 = document.getElementsByClassName("className");

// 3. name - '복수'Element 객체가 선택됨
var foo3 = document.getElementsByName("name");

// 4. tagName - '복수'의 Element 객체가 선택됨
var foo4 = document.getElementsByTagName("tagName");

2,3,4번 케이스의 경우와 같이 getElements~ method를 통해 복수의 Element 객체가 선택 될 때는 객체들이 nodeList(Elements의 배열) 의 형태로 return된다. nodeList의 item들은 일반적인 배열처럼 index 를 통해 접근이 가능한다. 2번의 예시에서 4개의 객체가 선택되었다면 foo2[3] 의 형태와 같이 아이템을 선택할 수 있다.

📌 return된 nodeList의 아이템 개수가 궁금하면 자바스크립트에서 배열의 길이를 알아보는 API와 동일하게 .length() 함수를 사용하면 된다.

객체의 속성(Attribute) 찾기

var foo = element.attributes;
foo[n];

Elements의 내용 가져오기 / 수정하기

/*
<div id = "idName"> hello world </div>
*/

var foo = document.getElementById("idName");
foo.textContent = "I'm hungry..."; // #idName 안의 텍스트가 hello world에서 I'm hungry로 바뀐다.

📌 innerText와 textContent 사이의 차이점

https://drive.google.com/uc?id=0B3Or0Wv2t1xwOExuS3VpYTZDN1k

textContent 프로퍼티의 경우

innerText 프로퍼티의 경우

‘노드’의 생성 / 삽입 / 삭제

1. 생성

var foo = document.createElement("div"); // 삽입을 원하는 태그 이름을 작성한다
foo.id = "fooId"; // 생성한 요소에 id명을 추가하고 싶을 때
foo.className = "fooClassName"; // 생성한 요소에 class명을 추가하고 싶을 때

2. 삽입

3. 삭제와 교체

  1. 삭제 : removeChild(삭제노드이름)

    removechild() 메서드는 문서 계층 구조에서 하나의 노드를 삭제한다.
    주의할 점은, 이 메서드는 삭제하려는 노드가 아니라 이 노드를 자식으로 가진 부모 노드 에서 실행된다는 점이다. 메서드 전달인자로 삭제할 자식 노드를 넘기고 부모 노드의 메서드로 호출한다.

    임의의 노드 n을 삭제하기 위해선 다음처럼 작성한다.

    n.parentNode.removeChild(n);
    
  2. 교체 : replaceChild(새노드이름, 교체될노드이름)

    replaceChild() 메서드 역시 이 노드를 자식으로 가진 부모 모드에서 실행된다. 자식 노드 하나를 삭제하고 새 노드로 교체되는 방식으로 이루어진다.
    메서드의 첫 번째 인자로는 새 노드 이름 / 두 번째 인자로는 교체될 노드의 이름이 넘겨진다.

    텍스트 문자열로 임의의 노드 n을 교체하기 위해서는 다음과 같이 작성한다.

    n.parentNode.replaceChild(document.createTextNode("hello world"), n);
    

자바스크립트를 통한 CSS 값 선택 및 조작

Element에 지정된 css style 값을 추가 수정 삭제하고 싶을 때는 style 속성을 활용하면 된다. 문법은 다음과 같다.

var foo = document.getElementById("box1");
foo.style.fontSize = "24pt";
foo.style.fontWeight = "bold";
foo.style.color = "blue";

하지만 이 style 속성 값은 정확히는 CSSStyleDeclaration 객체라는 점을 유의해야 한다.

따라서 style 속성 명에 미세한 차이가 있는데, 그 차이 중 대표적으로는 CSS 스타일 프로퍼티의 이름에 하이픈(-)이 포함되어 있지 않다는 것이다. 자바스크립트에서는 하이픈이 뺄셈 기호로 인식되기 때문이다.
예를 들어 foo.style.font-size = "24pt" 와 같은 코드는 문법 오류가 난다.

만약 값을 설정할 때 변수를 따로 지정하여 유동적으로 값을 조정하고 싶다면 다음과 같이 설정하면 된다.

var topMarginVal = windows.prompt("상단 마진 값 입력","예)20");
foo.style.marginTop = topMarginVal+"px"; // 숫자+"" => 문자열


참고 URL

HTML DOM insertBefore() Method
CSSStyleDeclaration
HTMLElement.style
책 자바스크립트 완벽 가이드