choice blog

DOM(Document Object Model) : 문서 객체 모델

각 tag를 접근하기 위한 object
그 object를 접근하기 위한 함수들의 모음

 

Document : 문서 안에 tag에 접근하도록 만들어진 객체(내장 object)

 

자주 사용되는 접근 메서드

getElemetById('id명') : id에 접근
getElemetsByClass('class명') : class들에 접근 (배열로 넘겨준다.)
getElemetsByName('name명') : name들에 접근 (배열로 넘겨준다.)
getElemetsByTagName('tag명') : tag들에 접근 (배열로 넘겨준다.)

---

childNodes : 요소가 포함하고 있는 자식 요소를 찾고 싶을 때 사용한다.

childNodes 사용 예시

<select id="cars"> <!-- 0번지 -->
	<option>Benz</option> <!-- 1,2번지 -->
	<option>BMW</option>
	<option>volvo</option>
</select>
<button type="button" onclick="cars()">선택</button>
<script type="text/javascript">

function cars() {
	let carName = document.getElementById('cars').childNodes; // 배열로 넘어온다.	
	alert(carName[1].text); // Benz
}
</script>    

설명

document.getElementById('cars').childNodes : id=cars인 요소의 번호를 배열로 넘겨받게 된다.

 

cars의 요소번호

<select>	<option>	</option>	<option>	</option>	<option>	</option>
0번지	1번지	2번지	3번지	4번지	5번지	6번지

alert(carName[1].text) : carName의 1번지의 value값을 경고창에 출력하게 된다.

---

appendChild : 자식 요소의 맨 뒤에 데이터를 추가한다.

appendChild 사용예시

<div id="div1">
	<p id="p1">첫번째 p태그</p>
	<p id="p2">두번째 p태그</p>
</div>

<script type="text/javascript">
function appendfunc() {
	let ptag = document.createElement('p'); // 새로운 <p></p> 추가
	let textNode = document.createTextNode("새로운 p 태그"); 
	
	ptag.id = "newid"; // p tag에 id추가
	ptag.className = "newclass" // p tag에 class추가
	
	ptag.appendChild(textNode) // <p id="newid" class="newclass">새로운 p 태그</p> 완성!
	
	let element = document.getElementById('div1'); // object가져옴
	element.appendChild(ptag); // div태그에 추가된다. p태그말고 테이블 같은걸 많이 추가한다.
}

설명 (태그명,요소명 == 변수명)

createElement(태그) : 새로운 tag를 추가한다.

createTextNode(내용) : tag에 넣을 내용을 추가한다.

태그명.appendChild(내용명) : 새로운 tag 완성! 

요소명.appendChild(태그명) : 요소 안에 새로운 tag를 추가한다. 

---

insertChild :  자식 요소의 추가할 위치를 선택하여 데이터를 추가한다.

insertChild 사용예시

function insertfunc() {
	let h2tag = document.createElement('h2'); // 모든태그를 추가할 수 있다
	let textNode = document.createTextNode("h2 태그를 추가");
	// id와 class 모두 추가할 수 있다.
	
	h2tag.appendChild(textNode); // <h2>h2 태그를 추가</h2> 완성!
	
	let element = document.getElementById('div1'); 
	//  앞에 붙일 땐 어디 앞에 지정을 해주어야 한다. 추가될 위치를 지정할 수 있다.
	let elementBefore = document.getElementById('p2'); 
	
	element.insertBefore(h2tag, elementBefore) // p1앞에 추가해라
}

설명 (태그명,요소명 == 변수명)

요소명.insertBefore(추가할 태그명, 추가할 위치 태그명) : 추가할 위치 태그명 앞에 추가가 된다.

---

 

removeChild :  자식 요소를 삭제한다.

function deletefunc() {
	let element = document.getElementById('div1');
	let removeElement = document.getElementById('p2');
	//  id=div1태그 안의 id=p2를 삭제해라
	element.removeChild(removeElement); 
}

설명 (태그명,요소명 == 변수명)

요소명.removeChild. 삭제할 태그명 :  요소 안에 태그를 삭제한다.

 

전체코드 실행화면

Benz BMW volvo 선택

뒤에 추가 앞에 추가 삭제

 

버튼을 클릭하면 추가 삭제가 된다.