1. this 키워드

 

- 객체 자신을 가리키는 자바스크립트 키워드

- DOM 객체에서 객체 자신을 가리키는 용도로 사용

  예) <div> 태그 자신의 배경을 orange 색으로 변경

  예) 버튼이 클릭되면 자신의 배경색을 orange로 변경

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this</title>
    <script>
        function change(obj, size, color){
            obj.style.color = color;
            obj.style.fontSize = size;
        }
        function change2(){
            t = document.getElementById("n1");
            t.style.color = "#FFA7A7";
            t.style.fontSize = "50px"
        }
    </script>
</head>
<body>
    <h3>this의 활용</h3><hr>
    <button onclick="change(this,'30px','#FFA7A7')">버튼1</button>
    <button onclick="change(this,'40px','#B2CCFF')">버튼2</button>
    <p id="n1" onclick="change2()">여기 클릭</p>
    <p id="n1" onclick="change2()">여기 클릭1</p><!--id는 같은 값은 사용하지 않는다. 이 경우 윗 줄만 효과 받음-->
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

2. document 객체

 

- HTML 문서 전체를 대변하는 객체

    프로퍼티 - HTML 문서의 전반적인 속성 내포

    메소드 - DOM 객체 검색, DOM 객체 생성, HTML 문서 전반적 제어

- DOM 객체를 접근하는 경로의 시작점

- DOM 트리의 최상위 객체

  브라우저는 HTML 문서 로드 전, document 객체를 먼저 생성

  document 객체를 뿌리로 하여 DOM 트리 생성

 

document 객체 접근

- window.document 또는 document 이름으로 접근

- document 객체는 DOM 객체가 아님

  연결된 스타일 시트가 없음

 

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
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head id="My Head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document 객체 주요 요소값</title><!--document : 브라우저 자체를 가르킨다.-->
    <script>
        var text = "문서 로딩 중일때 readyState = " + document.readyState + "\n";
    </script>
</head><!--onload : 팝업 띄울 때 자주 사용-->
<body onload="printProperties()" style="background-color: lemonchiffon; color: slategray; direction: rtl;">
    <div>이곳은 div 영역입니다.</div>
    <input id = "input" value="여기 포커스가 있습니다.">
    <script>
        function printProperties(){
            document.getElementById("input").focus();
            text+="1.location =" + document.location + "\n";
            text+="2.URL =" + document.URL + "\n";
            text+="3.title =" + document.title + "\n";
            text+="4.head.id =" + document.head.id + "\n";
            text+="5.body.color =" + document.body.style.color + "\n";
            text+="6.domain =" + document.domain + "\n";
            text+="7.lastModified =" + document.lastModified + "\n";
            text+="8.defaultView =" + document.defaultView + "\n";
            text+="9. 문서의 로드 완료 후 readyState =" + document.readyState + "\n";
            text+="10.documentElement의 태그이름 =" + document.documentElement.tagName + "\n";
            alert(text);
        }
    </script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

 

3. DOM 트리에서 DOM 객체 찾기

 

태그 이름으로 찾기

- document.getElementsByTagName() : 태그 이름이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴

  예) <div> 태그의 모든 DOM 객체 찾기

 

class 속성으로 찾기

- document.getElementsByClassName() : class 속성이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴

  예)

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
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function change(){
            //태그는 여러개이기 때문에 배열로 리턴한다.
            spanArr = document.getElementsByTagName("span");
            for(i=0;i<spanArr.length;i++){
                span = spanArr[i];
                span.style.color = "#F15F5F";
                span.style.fontSize = "30px";
            }
        }
    </script>
</head>
<body>
    <h3>내가 좋아하는 과일</h3>
    <button onclick="change()">클릭</button>
    저는 빨간 <span>사과</span>를 좋아해서
    아침마다 한 개씩 먹고 있어요. 운동할 때는 중간 중간에
    <span>바나나</span>를 먹지요. 탄수화물 섭취가 빨라
    힘이 납니다. 또한 달콤한 향기를 품은 <span>체리</span>와
    여름 냄새 물씬 나는 <span>자두</span>를 좋아합니다.
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

 

저작자표시 비영리 변경금지

'화면구현' 카테고리의 다른 글

document의 열기와 닫기, open()과 close()  (0) 2020.03.12
document.write()와 document.writeln()  (0) 2020.03.12
HTML DOM(Document Object Model)  (0) 2020.03.11
(Javascript) Date 객체, String 객체, Math객체, object 객체  (0) 2020.03.11
(Javascript) 배열  (0) 2020.03.11
this, document, DOM 객체 찾기 :: 2020. 3. 12. 21:28 화면구현
openclose

티스토리툴바