728x90
문서 객체 생성하는 방법
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로 처리가 됨(뭐 전체 선택, 전체 해제같은거 쓸 때)
728x90
광고
광고
