Dog foot print

[javascript] Document 객체 본문

Javascript

[javascript] Document 객체

개 발자국 2019. 7. 4. 23:11

자바스크립트를 조금 씩 더 공부하다보면 동적으로 html 요소들과 서로 상호작용을 하며 페이지를 만들고 싶어 할 것이다. 

 

예를 들면 버튼을 누르면 달력 api를 통해 새로운 달력을 그리고 싶은데 html에서는 이를 해결할 방법이 없고 새로운 달력을 만들기 위해서는 document 객체라는 것을 사용해서 웹페이지에 새로운 형태의 태그들을 구성해야 한다. 

 

 

 

Document 객체란

 

브라우저에서 문서를 읽으면 특변한 객체를 만든다. 바로  window객체 이다. 이 window객체는 최상위 객체로써 6개의 프로퍼티를 가지고 있는데 그 중 html의 코드들이 파싱되어 javascript 정보로 가지고 있는 것이 document 객체입니다. 

 

https://douglas88.tistory.com/15 퍼옴

 

Dom 객체의 사용

dom객체를 사용하는 이유는 html 태그에 이벤트를 설정하거나 javascript 로 문서내 html 에 render 되는 내용들을 변경 혹은 추가 할 때 사용합니다. 

 

<!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>
    <script>
            var a = document.getElementById("parents");
            console.log(a);
    </script>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div></div>
    <div id="parents"></div>
</body>
</html>

 

위에 보이는 document.getElementById(); 는 해당 인자에 해당하는 요소를 찾는다. 그러나 위의 결과는 null 이 나온다. 그 이유는 문서를 읽어 가면서 현재의 script 위치에서는 dom tree가 전부 그려지지 않았기 때문에 body가 끝날 지점에 script를 작성한다. 

 

<body>
    <div></div>
    <div id="parents"></div>
</body>
<script>ㅈ
        var a = document.getElementById("parents");
        console.log(a); // 결과는 <div id="parents"></div> 
</script>

Dom 객체의 메서드와 프로퍼티

dom 객체에 프로퍼티와 메서드는 종류가 꽤나 많기에 전부 다 기록 하는 것은 쓸대 없을 것 같다. 주로 사용하는 메서드와 프로퍼티를 작성도록 하겠다.  

 

document.getElementById()는 인자로 스트링을 받아 해당하는 id를 가지고 있는 요소의 정보를 가지고 있는다. 

 

document.getElementsByClassName() 는 인자로 스트링을 받아 해당하는 class를 가지고 있는 요소의 정보를 담은 객체를 배열로 반환한다. 

 

document.querySelectorAll() 은 css 선택자를 사용하여 요소를 배열로 만들어 사용 할 수 있다.  .querySelector() 도 있는데 이 메서드는 중복적인 요소가 있을 경우 최상위 요소만 셀렉트한다. 

 

document.write()는 해당하는 코드라인에 text를 작성하게 해준다. 

 

document.title 프로퍼티는 이 문서의 title을 가리키며 이 값에 값 할당시 해당 문서의 title이 변경된다.

 

document.get.. 의 사용 

 

이 docuement.getElementById의 사용은 주로 해당 요소의 전후 혹은 해당요소안에 요소를 추가하거나 변경 삭제하거나 이벤트를 설정할때 쓰인다. 

 

document.getElementById().innerHTML= "" ; 은 해당 요소안에 html 태그를 직접 작성할 수 있는 프로퍼티로 해당 프로퍼티에 스트링으로 입력된 html 태그를 작성하면 파싱되어 해당 id를 가진 요소 내부에 작성된 html이 입력된다. 

 

document.getElementById().onclick = function 은 해당 요소를 클릭하게 되면 일어나는 이벤트를 연결하는 프로퍼티이다. 

 

정리하며

document 객체는 문서내에 html과 javascript를 연결 할 수 있는 유일한 창구이다. html로 페이지를 정적으로 렌더하고 javascript로 동적으로 페이지를 꾸미고 싶을때 사용할 수 있으니 더 많은 것이 궁금하다면 아래 링크로 이동하여 필요한 메서드와 프로퍼티를 확인 하도록 하자 . 

 

https://developer.mozilla.org/ko/docs/Web/API/Document

 

Document

Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다.

developer.mozilla.org

 

반응형

'Javascript' 카테고리의 다른 글

[javascript] Date객체의 사용  (0) 2019.07.06
[javascript] 클로저  (0) 2019.07.05
[javascript] 동기와 비동기  (0) 2019.07.02
[javascript] 콜백 함수란 ?  (0) 2019.07.02
자바스크립트의 객체란 무엇인가 ? (3) 캡슐화  (0) 2019.06.30
'Javascript' Related Articles more
Comments