반응형
- 인터렉티브 한 기능을 추가하거나 움직임을 적용하기 위해서는? → CSS에서와 같이 해당 요소를 접근하여야 함
[광고 누르면 오늘의 행운 상승!!]
CSS : 선택자를 이용하여 HTML 문서 내의 요소에 접근
VS
JavaScript DOM : 웹 브라우저와 HTML 문서의 모든 기능과 요소의 접근- 비표준과 표준화의 매우 복잡한 과정을 거침
- 오래된 표준부터 최신의 표준까지 다양한 레벨에 걸쳐 함께 사용되는 문제가 있음
- 비표준은 처음부터 배우지 않는 것 → 웹을 학습하는 바른 방법
오래된 방법_무엇에 접근할 수 있나?
- 넷스케이프사의 네비게이터 웹 브라우저
- 버전 2와 3에 걸쳐 기본적인DOM 지원
- 웹 문서의 엥커, 폼, 이미지, 링크, 애플릿 등의 요소에 접근할 수 있는 방법 제공
DOM
- DOM은 향후 모든 브라우저에서 사용
- 오래된 표준 : 'DOM 레벨 0'이라는 이름으로 불리우게 됨
- W3C로 하여금 표준으로 인정
- 클라이언트 JavaScript의 일부분이 되어 남아있음
DOM 레벨 0
- Document 객체의 프로퍼티들로 문서 요소에 접근할 수 있게 해줌
- 프로퍼티들은 배열 값을 가짐
-document.anchors[]
//문서 내 앵커 객체의 배열
//앵커랑 href 속성 대신 name 속성을 가지고 있는 <a> 요소로 문서 내부에서 위치를 지정
//문서 내에 앵커가 사용되었다면? document.anchors[0]부터 순서대로 접근할 수 있음
-document.applets[]
//지금은 거의 사용되지 않은 자바 애플릿 객체의 배열을 위미
-document.images[]
//문서 내에 있는 이미지 객체의 배열
-document.links[]
//문서 내에 있는 링크의 객체의 배열
-document.forms[]
//문서 내에 있는 폼 객체의 배열
//문서 내에 하나 이상의 서식이 사용되었다면 document.forms[0]부터 순서대로 접근할 수 있음
오래된 방법_이름 속성으로 접근
function init(){
document.personalinfo.button.addEventListner("click", validForm, false);
//버튼 접근
}
function validForm(){
var genderEle = document.personalinfo.gender;
if(genderEle[0].checked){
alert("남성");
} else if (genderEle[1].checked){
alert("여성");
}
}
새로운 방법_DOM 문서 트리
- 제한적, 효율적 X
- 강력한 표준 W3C에서 제시
- 새로운 DOM이 표준화됨 → DOM 레벨 1과 2, 3 에 걸쳐 보강
새로운 표준 DOM
- HTML 문서의 모든 요소에 접근할 수 있게 하기 위해 문서를 트리로 표현
- 중첩된 요소들은 부모와 자식관계로 계층화 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>DOM 예제 HTML 문서</h1>
<p>이것은<abbr title = "Document Object Model">DOM</b> 예제 문서 입니다.</p>
</body>
</html>
새로운 방법_문서 내 노드 접근 1
getElementsByTagName()
- Document 객체의 프로퍼티로 HTML 요소명(태그명)으로 노드에 접근
- 프로퍼티가 반환하는 노드 객체가 하나 이상일 수 있기 때문에 배열로 반환함
<<HTML>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>DOM 예제 HTML 문서</h1>
<p>이것은<abbr title = "Document Object Model">DOM</b> 예제 문서 입니다.</p>
<p>두번째 단락입니다.</p>
<p id = "console"></p>
<script src = "script.js"></script>
</body>
</html>
<<JavaScript>>
var textBlock = document.getElementsByTagName("p");
textBlock[2].innerHTML = "세번째 단락입니다.";
getElementById()
- 요소의 id 속성 값으로 노드를 선택
- HTML 문서에서 id 속성은 유일한 값을 가지므로 하나의 노드만 반환함
console("이것은 세 번째 단락입니다.")
function console(outputString){
document.getElementById("console").innerHTML = outputString;
//문서 끝에 무언가를 출력해야 할 경우
}- HTML 문서 내에 특정 요소를 바로 선택하는 매우 강력한 프로퍼티
- 프로퍼티를 이용하려면 반드시 id 속성을 설정해야함 → 의미 있는 요소에만 id 속성을 지정하는 것이 좋음.
새로운 방법_노드의 순환
-
getElementsByTagName, getElementById
- HTML 문서 내의 모든 노드를 선택하기에는 어려움이 있음
- 이 두 프로퍼티만으로는 텍스트 노드는 접근할 수 조차 없음 -
DOM 은 접근한 노드를 기준으로 문서 내의 노드를 순환할 수 있는 프로퍼티를 제공
자식 노드 접근
- childNodes[]와 firstChild, lastChild 제공
- childNodes[] : 노드 객체의 자식 노드 목록을 배열로 반환
- firstChild, lastChild : 노드 객체의 첫 번째 자식 노드와 마지막 자식 노드를 반환
var habit3 = document.getElementById("habit").childNodes[5].
lastChild.textContent;
// 요소 id 속성 값이 "habit인 노드의 다섯 번째 자식 노드의 마지막
// 자식 노드의 텍스트를 변수 habit3에 할당하라는 의미
※줄바꿈에 유의해야 한다※
<ol id = "habit"> -> 줄바꿈을 인식해 childNode[0]
<li><span class = "listTitle">메뉴 1:</span>토스트1</li>
//childNode[1] , 줄바꿈을 인식해 childNode[2]
<li><span class = "listTitle">메뉴 2:</span>토스트2</li>
//childNode[3] , 줄바꿈을 인식해 childNode[4]
<li><span class = "listTitle">메뉴 3:</span>토스트3</li>
//childNode[5]
</ol>노드 객체의 부모 노드에 접근
- parentNode 프로퍼티
DOM 문서 트리 내에 같은 계층에 있는 요소들에게 접근
- nextSibling과 previousSiblin 사용
<<nextSibling>>
→ 형제 계층 또는 이웃 계층으로 불리는 같은 계층의 바로 다음 노드에 접근
<<previousSibling>>
→ 바로 앞 노드에 접근
- getElementsByTagName과 getElementsById를 이용
- 접근하기를 원하는 노드 또는 그 근처의 노드에 접근
노드 객체 프로퍼티(childNodes, firstNode, lastNode, parentNode,
nextSibling, previousSibling)로 노드 선택
문서 내 노드 접근2
- 최신의 DOM레벨이 발표되면서 기존에 비표준이었던 몇몇 유용한 DOM 프로퍼티가 표준으로 지정됨
getElementsByClassName()
- 요소의 class 속성 값을 이용하여 노드 객체를 선택하는 프로퍼티가 표준화됨
- 프로퍼티 이름: getElementsByClassName
- Class 속성 : 같은 값을 가지는 요소가 여럿 있을 수 있으므로 배열로 결과를 반환함.
var habit3 = document.getElementsByClassName("listTitle")[2].
nextSibling.textContent;
getElementsByName
- name 속성 값으로 노드 객체에 접근할 수 있음
- 다른 내용은 getElementsByClassName과 동일함(class 속성 값 대신 name 속성 값을 이용한다는 것 제외)
querySelectorAll()
- querySelectorAll은 CSS 셀렉터를 이용하여 노드를 선택함 (배열로 반환)
- qeurySelector도 CSS셀렉터를 이용하여 노드를 선택하지만 첫번째 노드만을 반환함.
//둘 다 같은 노드를 선택한다.
var habit3 = document.getElementsByClassName("listTitle")[2].
nextSibling.textContent;
var habit3 = document.querySelectorAll(".listTitle")[2]
.nextSibling.textContent;
- querySelectorAll은 Document 객체 뿐만 아니라 노드 객체의 프로퍼티이기도 함.
//아이디가 "habit"인 노드 내에 세 번째 li요소의
//마지막 자식 요소의 텍스트에 접근
var habit3 = document.querySelector("#habit").querySelectorAll
("li")[2].lastChild.textContent;
반응형
'5. 웹 프로그래밍 > 3. JavaScript' 카테고리의 다른 글
| 이벤트의 이해 [JavaScript][이벤트전파][이벤트막기] (0) | 2020.03.19 |
|---|---|
| 웹 문서의 조작 [JavaScript][getArrtibute][setArrtibute] (0) | 2020.03.19 |
| Function/배열복사 [JavaScript][함수][배열복사] (0) | 2020.03.19 |
| 배열의 메소드 [JavaScript][배열 메소드] (0) | 2020.03.19 |
| 배열의 원소 접근 [JavaScript][배열원소] (0) | 2020.03.19 |