하코사 자바스크립트 스터디 7주차

1. HACOSA JS STUDY
#9 CSS - DOM

2. 웹 문서의 세가지 요소
• 구조 (Structure)
‒ MarkUp 으로 문서 구조 표현
• 표현 (Presentation)
‒ Style Sheet 를 통해 어떻게 표현 할지 결정
• 동작 (Behavior)
‒ 액션을 주었을 때 반응하는 이벤트에 대한 정의
‒ JavaScript 와 DOM 영역

3. 세 가지 요소 분리하기
• 문서 구조화
‒ (X)HTML
• 외양 표현
‒ CSS
• 동작 정의
‒ DOM Script

4. Style 프로퍼티
• Style 프로퍼티는 인라인 정보만을 반환
‒ MarkUp과 CSS가 완전히 분리 되어 있는 경우 DOM Style 프로퍼티
로 정보를 가져올 수 없다.
• DOM으로 Style 프로퍼티 정보를 가져오려면 인라인 Style
이나 DOM으로 Style을 생성했을 경우에 가능

5. DOM을 이용한 스타일 지정
• <table>에 짝수번 행에 스타일 주기 예제 (p255)
• 시나리오
1. 문서 내 모든 테이블 요소를 가져온다
2. 각 테이블에 대해 변수 odd를 false로 설정한다.
3. 각 테이블의 모든 행에 대해 반복문을 실행한다.
4. 변수 odd가 참이면 스타일을 적용하고 odd를 거짓으로 바꾼다.
5. 변수 odd가 거짓이면 odd를 참으로만 바꾼다

6. DOM을 이용한 스타일 지정
• Script Coding
‒ function stripeTables(){
if(!document.getElementsByTagName) return false;
// 1. 문서 내 모든 테이블 요소를 가져온다
var table = document.getElementsByTagName(“table”);
for(var i = 0; i < tables.length; i++){
//2. 각 테이블에 대해 변수 odd를 false로 설정한다.
var odd = false;
var rows = tables[i].getElementsByTagName(“tr”);
//3. 각 테이블의 모든 행에 대해 반복문을 실행한다
for (var j = 0; j < rows.length; j++){
//4. 변수 odd가 참이면 스타일을 적용하고 odd를 거짓으로 바꾼다.
if(odd == true){
rows[j].style.backgroundColor = “#FFC”;
odd = false;
}else{
//5. 변수 odd가 거짓이면 odd를 참으로만 바꾼다
odd = true;
}
}
}
}

7. className
• 앞선 방식인 DOM으로 특정 요소의 표현을 바꾸는 방식은
동작영역에서 표현영역의 작업을 수행하므로 좋은 방법이
아니다.
• 이를 해결 하기 위해 DOM으로 Class 속성 값을 바꾸는 방
식 사용 => 동작과 표현의 분리
• setAttribute(“class”, “XXX”);
혹은
element.className = value;
로 표현

8. 함수 추상화
• 함수를 범용적으로 사용할 수 있도록 다듬는 일
• 함수의 재사용
• function styleHeaderSiblings(){
if(!document.getElementsByTagName) return false;
var heades = document.getElementsByTagName(“h1”);
for(var i = 0; i <headers.length; i++){
var elem = getNextElement(headers[i].nextSibling);
addClass(elem, “intro”);
}
}
=> 추상화 작업
function styleElementSiblings(tag, theclass){
if(!document.getElementsByTagName) return false;
var heades = document.getElementsByTagName(tag);
for(var i = 0; i <headers.length; i++){
var elem = getNextElement(headers[i].nextSibling);
addClass(elem, theclass);
}
}
: 함수가 컨트롤 하는 특정 요소를 인수로 받게끔 하여 재사용이 가능토록 한 것

9. END