[JS] JS로 DOM 객체 접근하기

📆 Created: 2024.12.26 Thu

🗓️ Updated: 2024.12.27 Fri

Reading time ~2 minutes

JS로 DOM 객체 접근하기

~~크롤링, 파싱이랑 비슷하다고 생각한다~~

1. DOM(Document Object Model)이란?

Document Object Model을 우리말로 풀이하면 문서 객체 모델이다.
즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

2. DOM 접근 Method

Method	설명
document.getElementById(id)	해당 id를 가진 요소 하나를 반환한다
document.querySelector(CSS Selector)	해당 선택자를 만족하는 요소 하나를 반환한다
document.getElementsByClassName(class)	해당 class명을 가진 요소들을 배열로 반환한다
document.getElementsByTagName(tag)	해당 태그명을 가진 요소들을 배열로 반환한다
document.querySelectorAll(CSS Selector)	해당 선택자를 만족하는 요소들을 배열로 반환한다

Example Code

            
                <!-- html -->
<div class="big">
    <input id="userInput" class="big" type="text" placeholder="Enter">
<div>

            
                // js
let elem;

elem = document.getElementById('userInput');
elem = document.querySelector('#userInput');

elem = document.getElementsByClassName('big')[0];
elem = document.getElementsByTagName('input')[0];
elem = document.querySelectorAll('.big')[1];

3. DOM 요소 접근 속성

Attribute	설명
element.innerHTML	해당 요소를 다른 HTML요소로 변경할 수 있는 속성이다.
element.style.property	해당 요소에 적용된 css속성의 값을 나타낸다.
element.attribute	해당 요소의 속성을 나타낸다.

Example Code

            
                <!-- html -->
<div>
    <button type='button'>BUTTON</button>
</div>

            
                /* css */
button {
    display: block;
    background-color: red;
    width: 300px;
    height: 300px;
}

            
                // js
let btn = document.getElementsByTagName('button')[0];

btn.style.display = 'none';
btn.style.width = '100px';

btn.type = 'submit';

4. document.write()

HTML에서 텍스트를 바로 출력하기

            
                <script>
 document.write("Hello World!");
</script>

HTML에서 HTML 요소를 바로 출력하기

DOM이 로딩된 이후 document.write()를 사용할 경우 HTML 요소가 전부 지워짐

5. DOM 로딩 확인하고 객체 접근하기

브라우저에서 DOM 로딩 순서는 head -> body 순서이다.
이 때 body가 로드되기 전에는 body 내에 선언된 요소들에 접근할 수 없다.
이벤트를 추가해 모든 요소가 전부 로드되었을 때 코드가 실행되도록 해야 한다.

            
                window.addEventListener('DOMContentLoaded',
    function foo() {
        // 실행 코드
        document.querySelectorAll('div');
    });

            
                document.onload = function foo() {
    // 실행 코드
    document.querySelectorAll('div');
}

6. iframe tag 이용하기

iframe이란

iframe = inline frame이다.
HTML 문서 내부에 또다른 HTML 문서를 넣을 때 사용한다.

            
                <iframe src="url" title="description"></iframe>

iframe 내부 객체 접근하기

            
                <!-- html -->
<iframe src="http://~/mypage.php" id="targetFrame">
</iframe>

            
                // js
let iframeDoc = document.querySelector('iframe').contentDocument;
iframeDoc.body.style.background = "blue";
iframeDoc.document.getElementById('');

참고

/#disqus_thread