[JavaScript]DOM의 사용법 — [GAEBAL Blog]

문서 객체 생성하는 방법

var header = document.createElement('h2'); // <h2> 태그 생성
var textNode = document.createTextNode('Hello'); // 'Hello'라는 문자열 생성
header.appendChild(textNode); // <h2> 태그에 textNode를 append
document.body.appendChild(header); // 문서(document)의 <body>에 문자열이 들어간 <h2> 태그를 append

주석으로 달아놓은 것을 보면 알 수 있듯이 이렇게 동적으로 문서객체를 생성할 수 있음!!!

문서 객체 lookup하는 방법

id 속성

var takeElement = document.getElementById("id명");

id가 'id명'인 원소를 가져옴

class 속성: NodeList

var takeElements = document.getElementsByClassName("class명");

class는 id와 다르게 중복 사용이 가능하므로 '...Elements...' 이고 NodeList를 반환함

tag name: NodeList

var takeElements = document.getElementsByTagName("tag명");

얘도 class와 마찬가지로 중복 사용이 가능하므로 '...Elements...' 이고 NodeList를 반환함

form 양식인 경우에는 name 속성

var takeElement = document.폼이름.입력항목이름;

form 양식 입력항목 데이터 가져오기

var takeData = document.폼이름.입력항목이름.value;

그 안의 값은 value로 가져옴

css selectors

var takeElement = document.querySelector("#id명"); // (Node)

var takeElements = document.querySelectorAll(".class명"); // (NodeList)

Element attribute(속성) 값 바꿔주는 방법

element 객체 lookup하기
밑의 코드(둘 중 하나)로 속성에 접근해서 값 바꿔주기

element.setAttribute("속성명", "속성값"); // 보통 이게 더 보기 좋아서 이렇게 많이 쓴다고 함!
element.속성명 = "속성값";

look up한 DOM에 CSS 설정하기

CSS 먼저 정의한 후 사용: class 속성 사용

class="css설정";

ss 선언 없이 동적으로 그때그때 css 설정

<tag style="font-size: 12px; background: red;"></tag>

style로 css property 지정할 때 규칙
- property-name : propertyName; ('-'기호 대신에 대문자로 변경)
- '-'기호 없으면 그냥 그대로 사용하면됨
- ex) font-size -> fontSize, background -> background

checkbox

단일 Node, 다중 NodeList 다 가능
같은 그룹 안에서 체크박스를 쓸 때는 NodeList로 처리가 됨(뭐 전체 선택, 전체 해제같은거 쓸 때)

티스토리툴바