먼저 이 HTML 문서에서 노드란 Body 부분의 각각의 요소들을 의미한다.
다른 이름으로는 태그, 요소 등등...
그리고 <h1>
<h2>
</h2>
</h1>
이와 같이 h1 아래에 h2가 위치하는 순차적으로 내려가는 구조로 짜여지는데
이와 같은 관계를 부모 자식관계 - 부모 노드, 자식 노드라고 한다.
그리고 javaScript에서 노드에 관련된 기능을 DOM, Document Object Model 라고 한다.
여태껏 태그들의 id나 클래스 등을 불러올 때 document.getElementBy**** 을 썻는데
이 키워드도 DOM에 포함된다.
다음으로는 자주 쓰이는 키워드들 몇가지를 소개한다.
getElement(s)ById(TagName, 등등) : 태그의 지정 속성을 기준으로 해당 태그를 불러온다.
createElement : 노드를 만들어 담아 놓을 때 사용
createTextNode : 노드 내부의 HTML문을 만들어 담아 놓을 때 사용, 노드 또한 가능
appendChild : 자식관계로 노드를 추가
속성 지정 및 추가 : getElement나 createElement로 노드 변수를 만들어 변수.******을 통해 속성 변경이나 기능을 활용
querySelector : <h1 id="id"> 와 같이 있을 때 h2를 불러오고 싶다면 '#id > h2'와 같이 입력하면 h2가 불러와진다.
<h2>
</h2>
</h1>
예
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
background: lightgray;
border: 1px solid black;
height: 100px;
}
</style>
</head>
<body>
<h1>DOM(Document Object Model)</h1>
<!-- 태그를 노드, 요소(엘리먼트)라고 표현 하기도 한다, 자식노드 부모노드 -->
<!-- h1은 body의 자식 노드이다. -->
<h3>텍스트 노드가 있는 노드 생성</h3>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function test1() {
// Element(노드) 생성
var title = document.createElement("h3");
// textnode 생성(내부 HTML 문)
var textNode = document.createTextNode("안녕? 난 텍스트노드야!");
// elemenet의 node 연결
title.appendChild(textNode);
// appendChild - 자식노드로 추가하는 메소드
document.getElementById("area1").appendChild(title);
}
</script>
<hr>
<h3>텍스트노드가 없는 노드 생성</h3>
<button onclick="test2();">실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function test2() {
// img 태그 생성
var imgTest = document.createElement("img");
// 속성 지정(이미지 링크, 가로 세로 등등)
imgTest.src = "https://www.fmkorea.com/files/attach/new/20171106/486616/416138940/828275155/4564da7307fbec289d6029377e4eb4bc.jpg";
imgTest.width = "150";
imgTest.height = "100";
// 없는 속성 추가
imgTest.myProperty = "123";
// 없는 속성을 추가하기 위해서는 setAttribute() 사용해야 함
imgTest.setAttribute("myProperty", "123");
document.getElementById("area2").appendChild(imgTest);
}
</script>
<hr>
<h3>innerHTML</h3>
<button onclick="test3()">실행확인</button>
<div id="area3" class="area">
<table id="board">
<tr>
<th>글번호</th>
<th>글제목</th>
<th>작성자</th>
<th>조회수</th>
<th>작성일자</th>
</tr>
</table>
</div>
<script>
function test3(){
// var board = document.getElementById("board");
// alert(board.innerHTML);
// css선택자를 자식 노드 선택하는 방법(board의 자식인 tbody를 지목)
var board = document.querySelector('#board > tbody');
var num = 1;
var title = "제목입니다";
var user = "user01";
var count = 1;
var date = new Date();
board.innerHTML += "<tr><td>" + num
+ "</td><td>" + title
+ "</td><td>" + user
+ "</td><td>" + count
+ "</td><td>" + date.getFullYear()
+ "-"
+ (date.getMonth() + 1)
+ "-"
+ date.getDate()
+ "</td></tr>";
}
</script>
<hr>
<h3>스타일 지정</h3>
<button onclick="test4();">실행확인</button>
<div id="area4" class="area"></div>
<script>
function test4(){
var area4 = document.getElementById("area4");
area4.style.backgroundColor = "orangered";
area4.style.borderRadius = "50px";
area4.style.transition = "all 2s";
// transition은 자연스럽게 스타일이 바뀌게 하는 키워드, 위의 예는 2초동안 바뀜
}
</script>
<h3>노드 삭제</h3>
<button onclick="test5();">실행확인</button>
<div id="area5" class="area"></div>
<script type="text/javascript">
function test5() {
var area5 = document.getElementById("area5");
area5.remove();
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-019.고전 이벤트 모델, 이벤트 발생 객체, 인라인 이벤트 모델, 표준 이벤트 모델, 이벤트 중지 (0) | 2018.11.15 |
|---|---|
| [JS]04-020.이벤트 전달 (버블링, 방지), stopPropagation, cancelBubble (0) | 2018.11.15 |
| [JS]04-017.JS의 지오 로케이션(위치 정보, getCurrentPosition()) (0) | 2018.11.15 |
| [JS]04-016.JS의 캡슐화 및 상속 (0) | 2018.11.15 |
| [JS]04-015.JS의 객체 관련 키워드(instanceof 키워드, new와 {} 생성의 차이점) (0) | 2018.11.14 |