JavaScript 2020. 9. 9. 07:48

🎯 자바스크립트 DOM 구조, 노드 객체 접근방법을 알아본다.

DOM( Document Object Model )

웹페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조이며 문서를 나타내는 최상위 객체는 document 객체이다. 자바스크립트를 사용하여 html 태그에 접근할 수 있다.

웹페이지가 로드될 때, 웹브라우저는 페이지의 DOM을 생성하고 트리구조로 관리한다. 각 객체를 노드라고 한다. 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다.

노드 속성과 메소드

자바스크립트를 이용해 페에지의 모든 태그, 속성, CSS스타일을 변경할 수 있고 이벤트 처리가 가능하다.

부모와 자식노드 관계

DOM 객체에 직접 접근하기

getElementById()

- id 값으로 접근한다. document.getElementById( id값 )

getElementsByTagName()

- 태그명으로 접근한다. document.getElementsByTagName( tag명 )

getElementsByClassName()

- class 속성으로 접근한다. document.getElementsByClassName( class명 )

querySelector(), querySelectorAll()

- CSS selector를 사용한다. document.querySelectorAll(selector);

- qureySelector는 여러개의 객체들 중 첫번째 객체 하나만 가져온다. 따라서 여러개의 객체를 선택하고 싶다면 querySelectAll을 사용해야 한다.

노드 워킹 접근 방법

상대적인 위치를 기준으로 DOM 객체에 접근하는 방법이다. 바디를 기준으로 h1이 첫번째 자식, p가 마지막 자식이다. 자식 노드 사이에선 앞에있는 노드를 nextSibling, 뒤에 있는 노드를 previousSibling으로 부른다.

innerText

<body>
    <div>
        <div id="x">홍길동</div>
    </div>
    <script type="text/javascript">

        var div = document.getElementById("x");
        console.log(div);

        var s = div.innerText;
        console.log(s);
        console.log(s.length);
        console.log(s.charAt(0));

    </script>
</body>

id가 x인 태그를 선택해서 div라는 변수이름을 붙였다. div를 콘솔에 출력해보면 <div id="x">홍길동</div> 를 리턴한다. .innerText 는 태그 안의 텍스트만 가져온다. 따라서 console.log(s);는 홍길동을 출력한다.

input.value

<body>
    이름:<input type="text" name="username" id="username">
    <a href="javascript:mesg()">입력값 얻기</a>
    <script type="text/javascript">

        function mesg(){
            var n = document.getElementById("username");
            console.log(n);
            var s = n.value;
            console.log(s);

        }
    </script>
</body>

인풋 상자 안에 입력한 값을 가져올 땐 value를 사용하면 된다. 인풋의 속성에 value="" 처럼 빈 스트링을 사용해 value를 명시해줘도 상관없다.

a태그 href 속성에 자바스크립트 함수를 호출할 수 있다. <a href="javascript:함수명()"></a> 호출되는 함수는 리턴값이 존재하면 안된다.

DOM이 모두 로딩되기를 기다리기

헤더에 포함된 스크립트와 외부 파일에서 불러온 자바스크립트는 HTML DOM이 실제로 생성되기 전에 실행된다. 따라서 헤더나 외부파일에서 실행된 모든 스크립트는 DOM에 접근할 수 없다.

해결방법

1. 페이지가 완전히 로딩되기를 기다리기

window.onload = init;

2. body 태그 맨 끝에 스크립트 추가하기

<script type="text/javascript">…</script></body>

😜 NEXT : 자바스크립트 이벤트 핸들링 공부하기

'JavaScript' 카테고리의 다른 글

자바스크립트 이벤트 핸들링 연습2 (0)	2020.09.13
자바스크립트 이벤트 핸들링 연습1 (0)	2020.09.11
자바스크립트 form 객체, 이벤트 핸들링 (3)	2020.09.10
자바스크립트 Built-In 내장객체 (0)	2020.09.08
자바스크립트 함수 선언, 콜백, 호출 스케줄링 (0)	2020.09.07

ABOUT ME

미현 개발 TIL 미현 개발 TIL

DOM( Document Object Model )

노드 속성과 메소드

부모와 자식노드 관계

DOM 객체에 직접 접근하기

노드 워킹 접근 방법

innerText

input.value

DOM이 모두 로딩되기를 기다리기

'JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

DOM( Document Object Model )

노드 속성과 메소드

부모와 자식노드 관계

DOM 객체에 직접 접근하기

노드 워킹 접근 방법

innerText

input.value

DOM이 모두 로딩되기를 기다리기

'JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바