반응형

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





DOM의 기본적인 이야기


웹 페이지가 로드되면 브라우저는 DOM을 만든다.


HTML DOM은 트리로 구성된다.


DOM HTML tree


(출처 :: https://www.w3schools.com/js/js_htmldom.asp)



오브젝트 모델을 이용하면 자바스크립트는 다양한 기능을 할 수 있게 된다.


1. 자바스크립트는 모든 HTML elements, attributes, CSS를 바꿀 수 있다.

2. 현재 존재하는 HTML elements와 attributes를 추가/삭제를 할 수 있다.

3. 이벤트 반응이 가능하고, 새로운 이벤트도 만들 수 있다.



즉, DOM을 간단히 말하면 HTML 요소를 어떻게 바꾸고 얻고, 추가하고 지우는지에 대한 표준을 의미하는 것이다.






DOM 메서드


HTML DOM 메서드는 HTML 요소에서 수행 할 수있는 메서드이다.


HTML DOM 속성은 사용자가 설정하거나 변경할 수 있는 그런 HTML 요소의 값이다.


- HTML DOM은 자바스크립트로 접근이 된다.


- DOM에서 모든 HTML요소는 오브젝트로 정의된다.


- 프로그래밍 인터페이스는 각 오브젝트의 속성과 메서드이다.


이때 속성이라함은 사용자가 얻거나 설정할 수 있는 것을 의미하고


메서드는 사용자가 행할 수 있는 액션을 의미한다.



예를들어보자.


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>test title</title>
    </head>
 
    <body>
        <h2> JavaScript </h2>
 
        <p id="test"></p>
 
        <script>
            document.getElementById('test').innerHTML = "crocus";        
        </script>
 
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


위의 코드에서 getElementById는 메서드이고, innerHTML은 속성이다.


Finding HTML Elements

MethodDescription
document.getElementById(id)Find an element by element id
document.getElementsByTagName(name)Find elements by tag name
document.getElementsByClassName(name)Find elements by class name


대표적인 HTML Element를 찾는 3가지 메서드이다.


그 외 다양한 DOM 메서드는 아래 링크에서 확인해볼 수 있다.


https://www.w3schools.com/js/js_htmldom_document.asp




이번에는 태그 네임을 이용한 검색을 해보자.


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
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<body>
 
    <p>Java Script</p>
 
    <div id="main">
        <p>hello world</p>
        <p>I am <b>Crocus</b></p>
    </div>
 
    <div id="main2">
        <p>good bye</p>
    </div>
 
    <input type="number" id="in" min="0" max="3" required>
    <button type="button" onclick="submit()"> << 확인 >> </button>
 
    <p id="test"></p>
 
    <script>
 
        function submit() {
            var get = document.getElementById('in');
            var x = document.getElementsByTagName("p");
 
            if(get.checkValidity() == true)
            {
                var num = parseInt(get.value);
                document.getElementById("test").innerHTML = x[num].innerHTML;
            }
            else
                document.getElementById('test').innerHTML = x.validationMessage;
        }
    </script>
 
</body>
</html>
 
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다.



위의 코드는 getElementsByTagName("p")를 통해 p 태그를 모아둔다는 의미를 가진다.


이때 get에는 Java Script가 0번째 배열에 들어가고, Hello world가 1번째, I am Crocus가 2번째, good bye가 3번째에 각각 들어가게 된다.


이러한 과정을 버튼을 만들어 구현해 본 간단한 코드이다.



태그, id 외에 다양하게 이용가능하다. 예를들어 클래스 네임도 찾아 낼 수 있고, css도 찾아 낼 수 있다.


더 자세한 내용은 다음을 참조하길 바란다.


https://www.w3schools.com/js/js_htmldom_elements.asp

















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

'Basic > JavaScript' 카테고리의 다른 글

addEventListener() 메서드  (0) 2017.09.24
자바스크립트 애니메이션 이용하는 방법  (0) 2017.09.23
자바스크립트 스트링 메서드  (0) 2017.09.22
자바스크립트 이벤트 사용 방법  (0) 2017.09.21
자바스크립트 Number 메서드  (0) 2017.09.20

티스토리툴바