문서 객체의 스타일을 조작하려면, 일단 문서 객체를 가져온 다음에 style 속성을 사용해 바꾸면 된다. 입력 방식은 CSS3에 입력하는 방식과 비슷하지만 background-color, background-image 또는 box-sizing 같이 -가 들어가는 경우 backgroundColor, backgroundImage 그리고 boxSizing등으로 -를 제거하고 뒤에있는 단어의 시작을 대문자로 바꿔주어서 나뉘지않고 하나로 쓸수 있게 변경해야 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let header1=document.getElementById('header1');
let header2=document.getElementById('header2');
header1.style.border='2px solid black';
header1.style.color='blue';
header2.style.backgroundColor='yellow';
}
</script>
</head>
<body>
<h1 id="header1">HEADER1</h1>
<h2 id="header2">HEADER2</h2>
</body>
</html>
|
cs |
단 문자열로 스타일 속성에 접근할 때는 아래의 두 가지 방법을 모두 사용할 수 있다.
|
1
2
|
document.body.style['backgroundColor']='red';
document.body.style['background-color']='red';
|
cs |
문서 객체를 제거할 때 필요한 메서드는 아래와 같다.
| 메서드 이름 | 설명 |
| removeChild(child) | 문서 객체의 child 노드를 제거한다. |
부모 노드(Parent Node)와 자식 노드(Child Node)의 관계를 알아야 한다. 예로 <body>태그안에 <h1>태그가 있다고 한다면, <body>태그는 <h1>태그의 부모 노드(Parent Node)이고 <h1>태그는 <body>태그의 자식 노드(Child Node)인 관계가 성립이 되는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let removeObject1=document.getElementById('remove1');
document.body.removeChild(removeObject1);
}
</script>
</head>
<body>
<h1 id="remove1">Document Object Remove</h>
<h1 id="remove2">Document Object Remove</h1>
<script>
document.body.removeChild(remove2);
</script>
</body>
</html>
|
cs |
<head>태그 내부에 <script>태그 안에서 문서 객체를 지우는 방법이 있고, <body>태그 안에 <script>태그를 만들어서 그 자리에서 직접 처리하는 방법이 있다.
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - 이벤트 종류 (0) | 2019.12.19 |
|---|---|
| JavaScript - 이벤트 개요 (0) | 2019.12.18 |
| JavaScript - 문서 객체 선택 (0) | 2019.12.17 |
| JavaScript - 문서 객체 생성 (0) | 2019.12.16 |
| JavaScript - 문서 객체 모델 개요 (0) | 2019.12.15 |
