모든지 기록하자!

DOM ( Document Object Model ) 본문

Web

DOM ( Document Object Model )

홍크 2021. 6. 8. 22:11
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 
	DOM : Document Object Model
		  각 tag를 접근하기 위한 object
		  그 object를 접근하기 위한 함수들
		  
		  document -> 문서안에 tag에 접근하도록 만들어진 object
		  
		  getElementById
		  getElementByClass		[]
		  getElementByName		[]
		  getElementByTagName	[]
 -->
 
 <!-- childNodes -->
 <h3 id="intro">h3 tag id=intro</h3>
 
 <p id="demo">p tag id=demo</p>
 
 <button type="button" onclick="func()">버튼</button>
 
 <script type="text/javascript">
 	function func() {
	// let text = document.getElementById("intro").childNodes[0].nodeValue; 
	   let text = document.getElementById("demo").childNodes[0].nodeValue;
	   alert(text);
	}
 </script>
 
 <br><br>
 
 <select id="cars">
 	<option>Benz</option>
 	<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.length);
		alert(carName[3].text); //childNodes는 무조껀 긁어올수 있다.
	}
 </script>
 
 <br><br>
 
<!--  appendChild(뒤)  insertChild(앞) -->
<div id="div1">
	<p id="p1">첫번째 p태그</p>
	<p id="p2">두번째 p태그</p>	
</div>

<button type="button" onclick="appendfunc()">뒤에추가</button>
<button type="button" onclick="insertfunc()">앞에추가</button>
<button type="button" onclick="deletefunc()">삭제</button>

<script type="text/javascript">
function appendfunc() {
	let ptag = document.createElement('p');  //<p></>
	let textNode = document.createTextNode("새로운 p 태그");
	
	//id와 class를 추가        
	ptag.id = 'newid';
	ptag.className = 'newclass';
	
	ptag.appendChild(textNode);   //<p id='newid' clas='newclass'>새로운 p태그</p>
	
	let element = document.getElementById('div1');
	element.appendChild(ptag);
}
function insertfunc() {
	let h3tag = document.createElement('h3');
	let textNode = document.createTextNode("h3 태그를 추가");
	
	h3tag.appendChild(textNode); // <h3>h3 태그를 추가</h3>
	
	let element = document.getElementById('div1');
	let elementBefore = document.getElementById('p2'); // 이 요소의 앞에
	
	element.insertBefore(h3tag, elementBefore); 
}
function deletefunc() {
	
	let element = document.getElementById('div1');
	let removeElement = document.getElementById("p2");
	
	element.removeChild(removeElement);
}
</script>





</body>
</html>
728x90
Comments