[JS] DOM 요소의 접근, 수정, 노드 삽입과 삭제
DOM 문서 객체 모델의 개념
원하는 DOM 요소에 다양한 방법으로 접근할 수 있다
DOM 요소의 수정, 노드의 삽입과 삭제를 통해 HTML문서를 조작할 수 있다.
DOM 요소의 접근 방법
DOM?? 문서 객체 모델 DOCUMENT OBJENR MODEL
문서 객체 -> HTML 문서의 태그를 자바스크립트에서 사용할 수 있도록 객체로 만든것
DOM 브라우저가 HTML 문서에 접근할 수 있도록 정의해 놓은 표준 모델
HTML 문서를 분석하고 표시하는 방법
웹문서가 로드되면 웹브라우저는 정적으로 DOM을 생성
- 계층적인 구조를 갖는 트리로 표현
- 자바스크립트를 통해 프로그램 실행 중에 웹 문서의 내용, 구조, 스타일 등에 대한 작업 진행 가능
ex)
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>HTML DOM</h1>
<p id="text">DOM트리</p>
</body>
</html>
DOM요소의 접근 방법
id를 이용
getElementById("아이디명")
id="아이디명"을 갖는 오직 하나의 요소만 선택 (id는 중복하여 사용할 수 없음!!!)
ex)
<head>
<script>
function print (msg) {
var myDiv = document.getElementById("main");
myDiv.innerHTML = msg;
}
</script>
</head>
<body>
<div id="main">안녕하세요?</div><br>
<input type="button" value="클릭해 보세요!" onClick="print('Hi, Evryone!')">
</body>
태그명을 이용
getElementByTagName("태그명")
지정한 태그명을 사용하는 모든 요소를 찾아 리스트 형태( [ ] 배열 형태)로 반환
ex)
<head>
<script>
function print() {
var msg="입력내용:";
var myInput = document.getElementsByTagName("input"); // 배열
for(var i=0; i<myInput.length; i++)
msg += (myInput[i].value+",");
alert(msg) ;
}
</script>
</head>
<body>
<form>
이름: <input value="홍길동" onChange="print()"><br>
학과: <input value="컴퓨터과학과" onChange="print()"><br>
학년: <input value="3학년" onChange="print()"><br>
주소: <input value="서울" onChange="print()"><br>
</from>
</body>
클래스명을 이용
getElementByClassName("클래스명")
class="클래스명"을 가진 모든 요소를 찾아 리스트 형태로 반환
ex)
<head>
<style>
</head>
<body>
<h3 class="bgcolor">클래스 명을 이용한 요소 접근</h3>
<p class="bgcolor">사용 메서드:</p>
<div class="bgcolor">getElementsByClassName()</div>
<script>
function print() {
var myClass = document.getElementsByClassName("bgcolor");
document.write("각 요소의 내용:");
document.write("<ul>")
for(var i=0; i<myClass.length; i++)
document.write("<li>+myClass[i].innerHTML+<li>");
document.write("<ul>")
}
</script>
</body>
DOM 요소의 내용 수정
innerHTML 속성
HTML 형식으로 요소의 내용을 다룰 떼 사용
요소변수 = dpcument.getElementById("아이디명")
변수 = 요소변수.innerHTML 요소변수.innerHTML = 값
textContent 속성
HTML태그와 속성을 제외하고 내용만 가져오는 경우
변수 = 요소변수.textContent
태그를 포함한 텍스트의 경우 -> 태그도 일반 텍스트로 취급
요소변수.textContent = 값
ex) innerHTML 와 textContent 방식의 차이 - 가져오기
<body>
<ul id="myList">
<li id="item1">HTML5+CSS3</li>
<li id="item2">JavaScript+jQuery</li>
</ul>
<button onClick="getMsg()">내용 가져오기</button>
<script>
function getMsg() {
var msg1 = document.getElementsById("myList").innerHTML;
alert(msg1);
var msg2 = document.getElementsById("myList").textContent;
alert(msg2);
}
</script>
</body>
ex) innerHTML 와 textContent 방식의 차이 - 지정하기
<body>
<button onClick="putMsg()">내용 설정하기</button>
<div id="inner">innerHTML 속성의 설정 결과</div><br>
<div id="text">textContent 속성의 설정 결과</div><br>
<script>
function putMsg() {
msg = "<p><b>DOM 요소 내용 수정:</b>
<i>innerHTML 속성, textContent속성</i></p>"
document.getElementsById("innner").innerHTML = msg;
document.getElementsById("innner").textContent = msg;
}
</script>
</body>
innerHTML html 태그가 적용됨
textContent html 태그가 텍스트로 취급됨
HTML 요소의 속성을 그대로 사용해서 값 할당
document.getElementById("아이디명").속성 = 값
ex)
<body>
<p>이미지 위로 마우스를 옮겨 보세요</p>
<img id="image" src="sun.png"
onMouseover = "changeImg(moon.png)"
onMouseout = "changeImg(sun.png)"
<script>
function changeImg(imgFile) {
document.getElementById("image").src = imgFile;
}
</script>
</body>
요소의 스타일 수정
<body>
<div id="main">
<p>버튼을 누루면 요소의 스타일이 변경됩니다.</p>
</div>
<input type="button" value="스타일 변경" onClick="changeStyle()">
<script>
function changeStyle() {
var myDiv = document.getElementById("main");
myDiv.style.backgroundColor = "yellow";
myDiv.style.color = "blue";
myDiv.style.fontStyle = "italic";
myDiv.style.fontWeight = "bold";
}
</script>
</body>
DOM 노드의 삽입과 삭제
텍스트가 있는 새 요소의 삽입 과정
1추가하려는 새로운 요소를 생성
var 새요소변수 = document.createElement("요소명");
2텍스트 내용이 있는 경우 텍스트 노드를 생성
var 텍스트노드변수= document.createTextNode("텍스트내용");
3생성된 텍스트 노드를 새로운 요소의 자식 요소로 연결
새요소변수.appendChild(텍스트노드변수);
4새 요소가 추가될 부모 요소를 찾아 자식 요소로 연결
var 부모요소변수 = document.getElementById("부모_아이디명");
부모요소변수.appendChild(새요소변수);
ex)
<body>
<input type="button" value="요소 추가" onClick="addElement()"><br>
<div id="main"></div>
<script>
function addElement() {
var newP = document.createElement("P");
var txtNode = document.createTextNode("새로운 p요소가 추가되었습니다.")
newP.appendChild(txtNode);
document.getElementById("main").appendChild(newP);
}
</script>
속성이 있는 요소의 삽입 과정
1추가하려는 새로운 요소를 생성
var 새요소변수 = document.createElement("요소명");
2텍스트 내용이 있는 경우 텍스트 노드를 생성
var 속성노드변수= document.createAttribute("속성명");
속성노드변수.value = "속성값";
3생성된 텍스트 노드를 새로운 요소의 자식 요소로 연결
새요소변수.setAttributeNode(속성노드변수);
4새 요소가 추가될 부모 요소를 찾아 자식 요소로 연결
document.getElementById("부모_아이디명").appendChild(새요소변수);
ex)
<body>
<input type="button" value="요소 추가" onClick="addElement()"><br>
<div id="main"></div>
<script>
function addElement() {
var newImg = document.createElement("img");
var srcNode = document.createAttribute("src");
srcNod.value = "rlower.jpg";
var heightNode = document.createAttribute("height");
heightNode.value = "100";
newImg.setAttributeNode(srcNod);
newImg.setAttributeNode(heightNode);
document.getElementById("main").appendChild(newImg);
}
</script>
삭제 과정
1 DOM 구조에서 삭제하려는 노드의 부모 노드를 찾아서
2 removeChild() 메서드 적용
부모노드.remoceChild(삭제할 노드);
<body>
<input type="button" value="요소 삭제" onClick="removeNode()"><br>
<ul id="list">
<li id="i1">항목1</li>
<li id="i2">항목2</li> <!-- 삭제할 요소 -->
<li id="i3">항목3</li>
<script>
function removeNode() {
var parent = document.getElementById("list");
var child = document.getElementById("i2");
parent.removeChild(child);
}
</script>
** 정리
DOM 요소의 접근 방법
문서 객체 모델 -> HTML 문서를 분석하고 표시하는 표준 방식 -> 트리구조
접근 방법 -> id, 태그명, 클래스명
DOM 요소의 수정
요소 내용 수정 -> innerHTML 속성, textContent 속성
요소 속성 수정 -> HTML 속성을 그대로 사용
요소 스타일 수정 -> 요소변수.stylel.css속성명
DOM 노드 삽입과 삭제
새 요소 삽입 -> 텍스트/속성이 있는 요소의 경우
기존 요소 삭제 -> 부모노드.remoceChild(삭제노드)