JavaScript_DOM

DOM(Document Object Model)

1) Node객체

-텍스트가 있는 노드 생성

-텍스트노드가 없는 노드 생성

2) innerHTML

3) 스타일 지정

4) 노드 삭제

 

1) Node객체

-텍스트가 있는 노드 생성

노드: 태그를 객체화 시켜서 보는 것(노드 = 태그) 글자를 넣을 수 있는 곳은 다 태그이다

<button onclick="test1();">실행확인</button>
	<div id="area1" class="area"></div>
	<script>
		function test1(){
			var title = document.createElement('h3');//<h3></h3>
			var textNode = document.createTextNode('안녕');
			
			title.appendChild(textNode);//<h3>안녕</h3> appendChild는 안에 들어가는 자식으로서 이어붙힌다.타이틀 안에 넣겠다는 의미다.
			document.getElementById('area1').appendChild(title);//타이틀 안에 텍스트노드가 이미 들어가있어서 타이틀을 넣어서 불러온다.
		}
	</script>

 

-텍스트노드가 없는 노드 생성

: 이미지넣기

<button onclick="test2();">실행확인</button>
	<div id="area2" class="area"></div>
	<script>
		function test2(){
			var imgTest = document.createElement('img');//<img>태그생성
			
			imgTest.src="https://www.telegraph.co.uk/content/dam/Pets/spark/royal-canin/happy-puppy.jpg?imwidth=1240"
			imgTest.wigth= '150';
			imgTest.height = '100';
			imgTest.myProperty = 'abc';//없는 속성이라 들어가진 않지만 강제로 넣을 수도 있음
			
			imgTest.setAttribute('myProperty', 'ABC');//강제로 집어넣기
			
			document.getElementById('area2').appendChild(imgTest);
			
		}
	</script>

<style> .area{border: 1px solid black; min-height: 100px;} </style>

 

추가해서 사용할 수 있다.

 

2) innerHTML

: 태그들을 다 넣을 수 있다.

	<button onclick="test3();">실행확인</button>
	<table id="board">
		<tr>
			<th>글 번호</th>
			<th>글 제목</th>
			<th>작성자</th>
			<th>조회수</th>
			<th>작성일자</th>
		</tr>
	
	</table>
	<script>
		function test3(){
			var board = document.getElementById('board');
			
			var num = 1;
			var title = '제목임다';
			var user = 'user01';
			var count = 1;
			var date = new Date();
			
			board.innerHTML += '<tr><td>' + num + '</td>'//innerHTML은 태그를 다 넣어준다. innerText는 텍스트로 다 들어간다(내용을 글자로 집어넣어야할때 사용)
								+'<td>' + title + '</td>'
								+'<td>' + user + '</td>'
								+'<td>' + count + '</td>'
								+'<td>' + date.getFullYear()+ "-" + (date.getMonth()+1)
										+ "-" + date.getDate() + '</td><tr>';
								
		}
	</script>

innerText는 텍스트로 다 들어간다(내용을 글자로 집어넣어야할때 사용)

 

3) 스타일 지정

<button onclick="test4();">실행확인</button>
	<div id="area4" class="area"></div>
	<script>
		function test4(){
			var area4 = document.getElementById('area4');
			
			area4.style.backgroundColor = 'black';
			area4.style.borderRadius = "100px";
			area4.style.transition = 'all 2s';
		}
	</script>

2초에 걸려서 블랙으로 컬러가 변경되고 테두리가 라운드로 변화가 일어난다. 

 

4) 노드 삭제

remove()를 사용하여 노드삭제를 한다.

<button onclick="test5();">실행확인</button>
	<div id="area5" class="area"></div>
	<script>
		function test5(){
			var area5 = document.getElementById('area5');
			area5.remove();
		}
	</script>