// 문서 객체 모델(DOM)
/* DOM의 정의
웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법 */
<div id="detail">
<h2>상품 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>상세 설명</h3>
<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피
품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
<h3>커피의 풍미</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
/* 여기서 상세 설명을 지우고 싶은 경우 자바스크립트로 DOM을 제어하면 된다. */
document.querySelector("#detail h3").style.visivility = 'hidden'
document.querySelector("#detail p").style.visivility = 'hidden'
// document는 웹 문서 자체를 가리키는 DOM요소 중 하나
// document를 사용하면 자바스크립트에서 웹 문서의 소스 전부를 인식할 수 있다.
// DOM 트리 DOM 구조는 나무처럼 생겼다.
// DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분합니다.
// DOM 트리는 가지와 노드로 표현합니다.
/* 1. 웹 문서의 태그는 요소(Element)노드로 표현합니다.
2. 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현합니다.
3. 태그의 속서은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현합니다.
4. 주석은 주석(Comment) 노드로 표현합니다. */
DOM 요소에 접근하기
DOM 요소를 id 선택자로 접근하는 함수- getElementById()
<h1 id="heading">에디오피아 게뎁</h1>
document.getElementById("heading")
폰트 사이즈도 조절할 수 있다.
document.getElementById("heading").onclick = function(){
this.style.fontSize = "5em"
DOM 요소를 입력양식으로 찾기
document. 객체 안에 forms 라는 배열 객체를 찾을 수 있다 forms 객체는 배열 형태로 document 객체의 하단에 존재하는 객체이이다
name 속성이 없을 때
<form>
<input type="text" value=""> /* document.forms[0].elements[0] */
<input type="text" value=""> /* document.forms[0].elements[1] */
<input type="submit">
</form>
name 속성이 있을 때
<form>
<input type="text" id="target1" name="text1"> // document.mtform.text1
<input type="text" id="target2" name="text2"> // document.mtform.text2
<input type="submit">
</form>
여기서 한가지 의문이 들 것이다.
getElementById() 함수와 querySelector()함수의 차이는 뭘까
둘다 id선택자가 있는 웹 요소에 접근 가능하지만 전자의 경우 단순히 id선택자를 이용해서 요소에 접근하지만 후자의 경우 id 선택자뿐만 아니라 querySelector(#container>ul)처럼 둘 이상의 선택자를 사용해서 요소에 접근할 수 있습니다.
DOM 요소를 class 값으로 찾아내는 함수 - getElementsByClassName()
Class 속성 값을 사용하여 DOM 요소에 접근하려면 getElementsByClassName()함수를 사용합니다
id 속성 값으로 접근했던 것과는 다르게 HTMLCollection값을 출력합니다. HTMLCollection은 여러 개의 HTML 요소를 담고있는 콜렉션 자료 형식으로, 배열과 비슷하다고 생각하면 됩니다.
DOM 요소를 태그 이름으로 찾아내는 함수 - getElementsByTagName()
id나 class 선택자가 없는 DOM 요소에 접근하려면 getElementsByTagName() 함수를 사용하여 접근한다.
*함수 이름에 복수를 뜻하는 's'가 있으면 여러 DOM요소에 접근한다고 생각하세요.
<body>
<ul>
<li>LIst item1</li>
<li>LIst item2</li>
<li>LIst item3</li>
<li>LIst item4</li>
<li>LIst item5</li>
</ul>
<script type="text/javascript">
var list = document.getElementByTagName("ul")[0];
var allItems = list.getElementByTagName("ll");
for (var i= 0; i< allItems.length; i++){
alert(allItems[i].firstChild.data);
}
</script>
</body>
DOM 요소를 다양한 방법으로 찾아주는 함수-querySelector(),querySeletorAll()
id,class 값을 둘다 사용해도 되는 함수이다. 이 두 함수의 차이점은 접근하는 DOM의 요소 개수에만 차이가 있을 뿐 사용법은 같다. id값을 이용할때는 #을 붙여주고 class값을 이용할 때는 .(마침표)을 붙여주자.
querySeletorAll()를 사용하고 난후 반환하는 값은 HTMLcollection이아니라 NodeList에 표기된다. 같은 방법으로 다룰수 있다. NodeList는 여러 개의 노드를 모아 놓은 것으로 배열과 비슷하다고 생각하면 된다.
예)document.querySelectorAll(".accent")[1].style.backgroundCOlor="yello"
"yello"