[JavaScript] Chapter 6. HTML 과 XML 문서 다루기- DOM

Coffee Time☕·2020년 7월 23일

JavaScript

javascript

목록 보기

6/8

6.1 DOM의 기본 파악하기

JavaScript 는 다양한 실행 환경에서 사용할 수 있는데,
다음으로 공부할 내용은 브라우저 환경(client측)에서 사용하는 내용이다.

DOM(Document Object Model)

마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조로, javascript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원하고 있다.
-DOM 은 문서를 문서 트리로 취급한다.

6.2 클라이언트 측 JavaScript의 사전 지식

요소 노드 취득하기
클라이언트측 JavaScript에서는 무엇을 하든 문서 트리에서 요소를 추출하는 단계가 필수적이다. 따라서 다음과 같은 메소드를 이용한다.

getElementById메소드
취득하고 싶은 요소를 element 객체로 취득한다.

<span id=result"></span> //html에서 얻고자 
//js 파일
var current=new Date();
var result= document.getElementById('result');
result.textContent=current.toLocaleString();
	```

getElementByTagName
id로 값을 가져오는 것이 아닌 tag이름으로 가져오는 방법이다.

//html 코드 
<ul>
	<li><a href="http://naver.com">1</a></li>
  <li><a href="http://naver.com">2</a></li>
  <li><a href="http://naver.com">3</a></li>
</ul>
//js 코드 
var list =document.getElementByTagName('a');
for (var i,len=list.length;i++)
	console.log(list.item(i).href);
}

getElementByName
getElementsByClassName

querySelector/querySelectorAll
이 메소드를 이용하면 보다 복잡한 조건으로 검색을 할 수 있다 .

var list= document.querySelector('#list.external');
for(var i=0;len=lset.length, i<len;i++){
	console.log(list.item(i).href);
  }
	```

노드 워킹
트리 모양이 된 노드 사이를 상대적인 위치 관계에서 검색할 수 있는 방법이다.
이벤트 구동 모델, event handler

6.3 속성값 취득/설정하기

대부분의 속성은 '요소 노드 속 같은 이름의 프로퍼티'로 액세스가 가능하다.

불특정 속성 취득하기

//html 
<img id="logo" src="http://..." width="215",height='67' alt="WINGS(Www Integrated Guide on Server-architecture)"/>
//.js 
document.addEventListener('DOMContentLoaded',function(){
	var logo =document.getElementById('logo');
   //img 에 포함되는 속성 list 획득
   var attrs=logo.attributes; 
   for(var i=0;len=attr.length, i<len;i++){
   	var attr=attrs.item(i);
       console.log(attr.name);
       }
     },false);