* 문서 객체 모델(DOM)
- (X)HTML 문서의 구조를 가리켜 문서 객체 모델(DOM: Document Object Model)이라고 함.
- (X)HTML 각 태그마다 기능과 속성이 있음.
- (X)HTML 태그는 각각의 기능(Method)과 속성(Properties)을 갖고 있는 문서 객체임.
- 자바스크립트의 문서 객체 모델(DOM)은 IE 8 이하 버전과 그 외 파이어폭스, 크롬, 사파리 등의 브라우저 간에 호환성이 떨어진다는 단점이 있음.
- 하지만 제이쿼리는 이런 호환성이 떨어지는 단점들을 모두 해결함.
[선택자]
- (X)HTML에서 사용하는 스타일(CSS)과 자바스크립트 내에서 사용하는 스타일은 모두 (X)HTML의 선택한 요소에 디자인 속성을 바꿀 때 사용함.
- 하지만 (X)HTML에서 사용하는 스타일은 사이트 방문자가 지정한 요소에 어떠한 동작을 취했을 때 지정한 요소에 스타일을 적용시킬 수 없음.
- 그래서 (X)HTML 내에서 작성된 스타일은 '정적'이라고 표현하고, 자바스크립트 내에서 작성한 스타일은 '동적'이라고 표현함.
- 선택자에는 크게 직접 문서에서 요소를 선택해 오는 직접 선택자(id, class, 폼 명(Form Name), 요소 명(Element Name) 선택자를 포함)가 있고, 이 선택자를 사용해 선택해 온 문서 객체를 기준으로 가까이에 있는 요소를 선택하는 인접 관계 선택자(parentNode, childNodes, firstChild, children, previousSibling, nextSibling 선택자를 포함)가 있음.
- 쉽게 말하면, 먼 거리에 있는 요소를 선택해 오는 원거리 선택자(직접 선택자)가 있고, 선택한 요소를 기준으로 가까운 거리에 있는 요소를 선택하는 근거리 선택자(인접 관계 선택자)가 있음.
[인접 요소 관계 파악하기]
- 인점 관계 선택자를 사용하기 위해서는 반드시 인접 요소의 관계를 잘 파악하고 있어야 함.
- 그래야 이미 선택한 문서 객체를 기준으로 인접한 문서 객체를 정확히 선택할 수 있음.
[선택자 종류]
- 원거리에 있는 요소를 선택할 때는 직접 선택자를 사용하고, 직접 선택자를 사용해 선택한 요소를 기준해서 근접해 있는 요소를 선택해 올 때는 인접 관계 선택자를 사용하면 됨.
- 예를 들어, 먼 거리의 목적지(선택할 문서 객쳬: 요소)에 떠날 때에는 비행기(직접 선택자)를 타고, 비행기를 타고 내린 지점부터 가까운 거리의 목적지를 이동할 때는 지하철(인접 관계 선택자)을 타고 이동하는 것과 같음.
- 선택자의 종류
|
구분 |
종류 |
설명 |
|
직접 선택자 |
document.getElementById("아이디 명") |
아이디를 이용해 요소를 선택해 옴. |
|
document.getElemetsByTagName("요소(태그)명") |
요소의 이름을 이용해 요소를 선택해 옴.. | |
|
document.formName.inputName |
폼 요소에 name 속성을 이용해 요소를 선택함. | |
|
인접 관계 선택자 |
parentNode |
선택한 요소의 부모 요소를 선택해 옴. |
|
childNodes |
선택한 요소의 모든 자식 요소를 선택해 옴. 선택한 모든 요소가 배열 객체로 저장됨. | |
|
children |
선택한 요소의 자식 요소인 태그만 선택해 옴. 선택한 모든 요소가 배열 객체로 저장됨. | |
|
firstChild |
선택한 요소의 첫 번째 자식 요소만 선택해 옴. | |
|
previousSibling |
선택한 요소의 이전에 오는 형제 요소만 선택해 옴. | |
|
nextSibling |
선택한 요소의 다음에 오는 형제 요소만 선택해 옴. |
- parentNode, firstChild, previousSibling, nextSibling는 공백 문자 인식 호환성에 문제가 있음.
[선택자 적용 위치와 방법]
- 직접 선택자와 인접 관계 선택자를 사용할 때는 <head> 태그 영역에 자바스크립트를 선언하게 되면, (X)HTML을 읽어오는(loading) 것보다 스크립트의 선택자가 먼저 실행되어 문서객체를 선택할 수 없게 됨.
- 스크립트에 선택문을 사용할 경우에는 <body> 태그 영역에 문단 태그 작성을 마친 후 마지막 부분에 작성하거나, 아니면 window.onload=function() { ... }를 이용하여 선택문을 작성해야 함.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 |
<!--선택자 사용시 잘못된 적용 위치-->
<html>
<head>
자바스크립트 선언 <!--HTML 문단 태그가 로딩되기 전에 실행됨-->
</head>
<body>
HTML 문단 태그 작성
</body>
</html>
<!--선택자 사용시 올바른 적용 위치 1-->
<html>
<head>
</head>
<body>
HTML 문단 태그 작성
자바스크립트 선언 <!--HTML 문단 태그가 로딩된 후에 실행됨-->
</body>
</html>
<!--선택자 사용시 올바른 적용 위치 2-->
<html>
<head>
<script type="text/javascript">
window.onload=function(){
스크립트 실행문 // HTML 문단 태그가 로딩된 후에 실행 됨.
}
</script>
</head>
<body>
HTML 문단 태그 작성
</body>
</html> |
cs |
[직접 선택자를 사용한 문서 객체 CSS 적용법]
- 직접 선택자로서 문서 객체의 스타일(CSS)를 적용할 때는 기본적으로 다음과 같은 방법을 사용함.
- 기본형
|
document.직접 선택자(선택 메서드).style.속성=값; |
- 적용 예)
|
<h1 id="title">웹표준</h1>
document,getElementById("title").style.color="blue"; |
|
<p>내용1</p> index 0 <p>내용2</p> index 1 <p>내용3</p> index 2 <p>내용4</p> index 3
var obj=document.getElementByTagName("p")[3].style.color="blue"; |
|
<div id="box"> <p>내용1</p> Index 0 <p>내용2</p> Index 1 <p>내용3</p> Index 2 </div>
var obj=document,getElementById("box"); obj.getElementByTagName("p")[1].style.color="#f00"; |
- 자바스크립트에서 스타일(CSS) 속성을 작성할 때 주의해야 할 점은, 배경색이나 글자 크기 드의 경우 속성을 사용할 때 하이픈('-')문자가 포함되어 있는데, 자바스크립트에서 하이폰 문자를 사용하면 산술 연산자로 인식된다는 것. 따라서 아래와 같이 작성해야 함.
|
(X)HTML에서 CSS 사용 시 |
자바스크립트에서 CSS 사용 시 |
|
background-color |
backgroundColor |
|
font-size |
fontSize |
[인접 관계 선택자로 문서 객체에 스타일 적용하기]
- 직접 선택자를 사용하여 원거리의 요소까지 선택한 후, 인접 관계 선택자를 사용해 앞에서 선택한 요소를 기준으로 근거리에 있는 요소를 선택함.
- 그리고 이어서 마침표(.)로 구분하여 style과 속성을 작성하고 대입 연산자를 사용하여 속성값을 입력함.
- 기본형
|
document.직접 선택자(선택 메서드).인접 관계 선택자.style.속성=값; |
- 사용 예제)
|
<h1 id="title"><a href="#">웹표준</a></h1> document.getElementById("title").children[0].style.backgroundColor="#ff0"; |
- DOM에 적용하는 인접 관계 선택자는 IE 8 이하 버전과 그 의 브라우저와의 호환성이 떨어짐.
-> 이유? 공백 문자의 인식 여부 차이 때문. (파이어폭스/크롬/사파리 등의 브라우저 - 코드에 공백이 있거나 줄 바꿈이 들어가면 그 것을 한 칸의 공백 문자로 인식.)
|
파이어폭스, 크롬, 사파리 등 브라우저 |
IE 8 이하 버전 브라우저 |
|
<div id="wrap"> 줄 바꿈(공백 문자 생성됨) <p>내용1</p> 줄 바꿈(공백 문자 생성됨) <p>내용2</p> 줄 바꿈(공백 문자 생성됨) <p>내용3</p> 줄 바꿈(공백 문자 생성됨) <p>내용4</p> 줄 바꿈(공백 문자 생성됨) </div> |
<div id="wrap"> 줄 바뀌어도 공백 문자 생성 안 됨.
<p>내용1</p> <p>내용2</p> <p>내용3</p> <p>내용4</p> </div> |
* 노드 타입으로 인접 관계 선택자 문제 해결하기
- 호환성 문제는 노드 타입(nodeType)을 이용하면 해결할 수 있음.
[노드 타입]
- HTML 노드에는 (X)HTML 태그를 연결하는 요소(Element) 노드와 텍스트를 연결하는 텍스트(Text) 노드, 그리고 (X)HTML 태그에 속성을 연결해 주는 속성(Attribute) 노드가 있음.
- 선택자로 선택한 요소가 어떤 노드인가에 따라 노드 타입 값이 다음과 같이 표기됨.
- 노드 타입의 종류
|
종류 |
타입 값 |
|
요소(Element) 노드 |
1 |
|
속성(Attribute) 노드 |
2 |
|
텍스트(Text) 노드 |
3 |
- 다음과 같이 인접 관계 선택자 호환성 문제를 해결할 수 있음.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<head>
<body>
<div id="wrap">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<script type="text/javascript">
//<![CDATA[
document.getElementById("wrap").children[0].style.color="red";
var p=document.getElementsByTagName("p")[1];
var nextObj=p.nextSibling;
while(nextObj.nodeType != 1) {
nextObj=nextObj.nextSibling;
}
nextObj.style.backgroundColor="yellow";
//]]>
</script>
</body>
</head> |
cs |
[요소의 속성값 변경, 생성 및 불러오는 방법]
- 문서 객체의 속성 메서드
|
종류 |
풀이 |
|
요소 선택.속성명 |
요소의 지정한 속성값을 불러옴. |
|
요소 선택.속성명="새 값" |
요소의 지정한 속성값을 새 값으로 변경 또는 생성함. |
|
요소 선택.getAttribute("속성"); |
요소의 지정한 속상값을 불러옴. |
|
요소 선택.setAttribute("속성","새 값"); |
요소의 지정한 속성값을 새 값으로 변경 또는 생성함. |
- 예)
|
// 속성값 불러오기 <h1><img src="images/log.gif" id="top_log" alt="이지" /></h1>
document.getElementById("top_log").src; document.getElementById("top_log").getAttrivute("src");
// 속성 변경 적용 <h1><img src="images/log.gif" id="top_log" alt="이지" /></h1>
document.getElementById("top_log").src="images/symbol.jpg"; document.getElementById("top_log").setAttrivute("src","images/symbol.jpg");
|
- 문서 객체의 하위 요소(innerHTML) 속성
|
종류 |
풀이 |
|
요소 선택.innerHTML |
선택한 요소의 모든 하위 요소를 문자 데이터로 변환함. |
|
요소 선택.innerHTML=새 요소; |
선택한 요소의 전체 하위 요소를 새 요소로 변경 또는 새롭게 생성함. |
[문서 객체 이벤트 핸들러 적용하기]
- 방문자가 사이트에서 행하는 모든 행위를 '이벤트'라고 하고, 이런 행위를 취했을 때 자바스크립트 코드가 실행되는 것을 '이벤트 핸들러'라고 함.
- 이벤트 종류
|
종류 |
풀이 |
| onclick |
선택한 요소를 마우스로 클릭했을 때 이벤트가 발생함. |
| onmouseover |
선택한 요소에 마우스를 올렸을 때 이벤트가 발생함. |
| onmouseout | 선택한 요소에 마우스가 벗어났을 때 이벤트가 발생함. |
|
submit |
선택한 폼에 전송이 일어났을 때 이벤트가 발생함. |
- 문서 객체에 이벤트 핸들러를 적용하는 기본형은 다음과 같음.
|
요소 선택.이벤트 종류=function() { 일련의 실행문; } |
- 예)
|
<a href="#" id="btn1">버튼1</a>
document.getElementById("btn1").onclick=function(){ alert("welcome!!"); } |
[폼 요소 선택자]
- 폼 요소 선택 방식
|
구분 |
종류 |
설명 |
|
입력 요소 선택자 |
document.getElementById("아이디 명") |
폼 요소를 아이디로 선택할 때 사용함. |
|
document.폼 이름.입력 요소 이름 |
폼 요소를 이름으로 선택할 때 사용함. | |
|
select option 선택자 |
document.폼 이름.입력 요소 이름.options[index] |
<select>에 <option>을 선택할 때 사용함. |
|
var i=document.폼 이름.입력 요소 이름.selectedIndex; document.폼 이름.입력 요소 이름.options[i]; |
<select>에 선택된 <option>을 선택할 때 사용함. |
- 폼 요소 속성 종류
|
구분 |
속성 |
설명 |
|
전체 |
value |
입력 요소의 value 속성을 변경하거나, 값을 가져옴. |
|
disabled |
입력 요소의 disabled 속성을 변경하거나, 현재 상태의 값을 가져옴. | |
|
defaultValue |
입력 요소 초기에 입력된 value의 값을 가져옴. | |
|
선택 박스 |
selected |
<select> 태그에 <option> 선택된 상태의 값을 가져옴. 선택한 <option>태그가 선택되어 있을 경우에는 true 반환, 선택되어 있지 않을 경우 false 반환. |
|
체크 박스 라디오 버튼 |
checked |
체크 박스 또는 라디오 버튼 태그의 체크 상태 값을을 반환하거나 또는 체크 여부를 제어할 수 있음. 체크가 되어 있으면 true 반환, 체크가 해제되어 있을 경우 false 반환. |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 키 코드(Key Code) 정리 (키보드 이벤트) (0) | 2022.06.16 |
|---|---|
| 이벤트 객체 (Event Object) (0) | 2017.05.21 |
| 이벤트 (Event) (0) | 2017.05.21 |
| 함수 (Function) (0) | 2017.05.20 |
| 브라우저 객체 모델(BOM) (0) | 2017.05.20 |
| 객체 / 내장객체 (0) | 2017.05.20 |
| 자바스크립트 기초 문법 (0) | 2017.05.20 |
| 쿠키(Cookie) (0) | 2017.05.18 |
