DOM : 브라우저는 HTML 문서를 읽어서 DOM을 구성한다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DICTYPE html>
<html lang="en">
<head>
<title>My title</title>
</head>
<body>
<a herf= "">My link</a>
<h1>My header</h1>
</body>
</html>
|
메모리에 tree생성하고 이것을 조작한다.
생성된 DOM을 다뤄야 하기에 Script는 HTML 태그가 생성된 이후인 마지막에 넣는것이 효율이 좋다.
DOM에서 요소(element)찾는 방법
- document.getElementById(id) - id로 찾기
- document.getElementByTagName(name) - tag로 찾기
- document.getElementsByClassName(name) - class로 찾기
- document.querySelectorAll("셀렉터") - CSS selector로 찾기
[참고] document.querySelector("셀렉터") - 한개만 반환
DOM에서 요소(element)변경하기
- element.innerHTML = "새로운 내용";
- element.style.CSS속성 = 값; //css속성 변경
- element.setAttribute(속성, 값); //elemen.속성 = 값;
- var attr = element.getAttribute("속성"); //속성읽어오기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id = "header0">Header</h1>
<h1>Header</h1>
<h1>Header</h1>
<script>
window.onload = function(){
var h1Tag = document.getElementById('header0');
var h1Tags = document.querySelectorAll('h1');
h1Tag.innerHTML += '- first';
for(i = 0; i <h1Tags.length;i++){
h1Tags[i].innerHTML += '-'+i;
h1Tags[i].style.backgroudColor = 'yellow';
}
}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
DOM에서 새로운 요소(element) 생성하기
|
1
|
document.createElement(element)
|
|
1
|
document.createTextNode(text)
|
|
1
|
elemnet.innerHTML = "HTML텍스트"; //HTML
|
|
1
2
|
element.textContent = "텍스트"; //HTML 태그 ㅇ
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
DOM에서 요소(element) 추가 & 삭제하기
|
1
2
3
|
element.appendChild(element) //지정된 요소 (자식)을 추가
elemnet.removeChild(element) //지정된 요소 (자식)을 삭제
elemnet.replaceChild(element) //지정된 요소 (자식)으로
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.onload = function(){
//h1태그와 text node를 생성
var h1 = document.createElement('h1');
var txtNod = document.createTextNode('Hello');
h1.appendChild(txtNode); //h1태그에 node를 추가
document.body.appendChild(h1);//h1태그를 body에 추가
}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.onload = function() {
var img = document.createElement('img');
//사용자 정의 속성은 setAtrribute(), getAtrribute()로 읽고 쓰기를 해야한다.
document.body.appendChild(img);
}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
DOM에서 요소(element) 순회하기(navigation)
element.firstChild -요소의 첫번째 자식
element.lastChild -요소의 마지막 자식
element.parentNode - 요소의 부모
element.nextSibling - 요소의 다음 형제
elemnet.previousSibling -요소의 이전형제
댓글