DOM

728x90

DOM

@2024.04.04

문서 객체 모델 DOM(Document Object Moder)

💡

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공

W3C의 표준 객체 모델이며, 아래 계층 구조로 표현

html
└── head
│    └── title
│         └── "문서 제목"
└── body
     └── header
     │    └── h1
     │         └── "웹 페이지 제목"
     └── main
     │    └── article
     │    │    └── h2
     │    │    │    └── "글 제목"
     │    │    └── p
     │    │         └── "글 내용"
     │    └── aside
     │         └── h3
     │              └── "부가 정보"
     └── footer
          └── p
               └── "푸터 내용"

사용자의 인터렉션(상호작용)에 따라 동적으로 UI를 업데이트하려면

HTML에 JavaScript를 연동해야 가능하다.

JavaScript에서의 DOM

💡

태그에 대한 정보를 지니고 있는 JavaScript 객체

요소 선택

document.getElementById('id') : ID에 해당하는 요소 반환

document.querySelector('selector') : CSS 선택자에 해당되는 첫 번째 문서 요소 반환

document.querySelectorAll('selector') : CSS 선택자에 해당하는 모든 문서의 요소를 반환

<body>
    <div id="myDiv">Hello, World!</div>
    <div class="container">
        <p>Hello, World!</p>
    </div>
    <div class="container">
        <p>Goodbye, World!</p>
    </div>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

    <script>
        // ID가 'myDiv'인 요소를 가져옵니다.
        var elementById = document.getElementById('myDiv');
        console.log("getElementById:", elementById.textContent); //Hello, World!

        // 클래스가 'container'인 첫 번째 div 요소의 첫 번째 p 요소를 가져옵니다.
        var querySelector = document.querySelector('.container p');
        console.log("querySelector:", querySelector.textContent); //Hello, World!

        // 문서 내의 모든 li 요소를 가져옵니다.
        var querySelectorAll = document.querySelectorAll('li');
        console.log("querySelectorAll:"); 
        for (var i = 0; i < querySelectorAll.length; i++) {
          // 각 요소의 텍스트 콘텐츠를 출력합니다.
          console.log(querySelectorAll[i].textContent);
        }
    </script>
</body>

요소 가져오기

element.innerHTML : 요소의 HTML 내용을 읽거나 변경

element.innerText : 요소의 텍스트 내용을 읽거나 변경

element.textContent : 해당 요소와 그 하위 요소의 모든 텍스트 내용을 읽거나 변경

element.getAttribute('attribute') : HTML 요소의 특정 속성 값을 가져온다.

element.setAttribute('attribute', 'value') : HTML 요소의 특정 속성을 주어진 값으로 설정

<body>
    <!-- element.innerHTML -->
    <div id="example1">This is <strong>bold</strong> text.</div>
    <button onclick="changeInnerHTML()">Change innerHTML</button>
    <br><br>

    <!-- element.innerText -->
    <div id="example2">This is <strong>bold</strong> text.</div>
    <button onclick="changeInnerText()">Change innerText</button>
    <br><br>

    <!-- element.textContent -->
    <div id="example3">This is <strong>bold</strong> text.</div>
    <button onclick="changeTextContent()">Change textContent</button>
    <br><br>

    <!-- element.getAttribute() and element.setAttribute() -->
    <p id="example4" class="oldClass">This paragraph has a class attribute.</p>
    <button onclick="changeAttribute()">Change class attribute</button>

    <script>
        // element.innerHTML 예시
        // Change innerHTML 버튼을 클릭하면 example1 요소의 내용이 변경
        function changeInnerHTML() {
            var element = document.getElementById('example1');
            element.innerHTML = "This is <em>italic</em> text.";
        }

        // element.innerText 예시
        // Change innerText 버튼을 클릭하면 example2 요소의 내용
        function changeInnerText() {
            var element = document.getElementById('example2');
            element.innerText = "This is new text.";
        }

        // element.textContent 예시
        // Change textContent 버튼 클릭하면 example3 요소의 내용이 변경
        function changeTextContent() {
            var element = document.getElementById('example3');
            element.textContent = "This is new text without considering <strong> tags.";
        }

        // element.getAttribute()와 element.setAttribute() 예시
        // Change class attribute 버튼을 클릭하면 example4 요소의 클래스 속성이 변경
        function changeAttribute() {
            var element = document.getElementById('example4');
            var currentClass = element.getAttribute('class');
            if (currentClass === 'oldClass') {
                element.setAttribute('class', 'newClass');
            } else {
                element.setAttribute('class', 'oldClass');
            }
        }
    </script>
</body>

요소 조작

element.style.property = 'value' : HTML 요소의 스타일을 변경

element.classList.add('class')

element.classList.remove('class') ⇒ HTML 요소에 클래스를 추가, 제거 또는 토글

element.classList.toggle('class')
- 토글 : 어떤 상태나 설정을 번갈아가며 변경하는 것
  - 불 켜기/끄기 버튼이 있을 때 한번 누르면 켜지고, 한 번 더 누르면 꺼지는 것

document.createElement('tag') : 새로운 HTML 요소를 생성

element.appendChild(child) : 요소의 자식으로 다른 요소를 추가

element.remove() : 요소를 삭제

<body>
    <!-- element.style.property = 'value' -->
    <p id="myPara">This is a paragraph.</p>
    <button onclick="changeStyle()">Change Style</button>
    <br><br>

    <!-- element.classList.add('class'), element.classList.remove('class'), element.classList.toggle('class') -->
    <p id="myDiv" class="highlight">This is a div.</p>
    <button onclick="toggleClass()">Toggle Highlight Class</button>
    <br><br>

    <!-- document.createElement('tag'), element.appendChild(child) -->
    <div id="container"></div>
    <button onclick="createNewElement()">Create New Element</button>
    <br><br>

    <!-- element.remove() -->
    <div id="removeMe">
        <p>This will be removed.</p>
    </div>
    <button onclick="removeElement()">Remove Element</button>

    <script>
        // element.style.property = 'value' 예시
        // Change Style 버튼을 클릭하면 myPara 요소의 스타일이 변경
        function changeStyle() {
            var myPara = document.getElementById('myPara');
            myPara.style.color = 'blue';
            myPara.style.fontSize = '20px';
        }

        // element.classList.add('class') 예시
        // element.classList.remove('class') 예시
        // element.classList.toggle('class') 예시
        // Toggle Highlight Class 버튼을 클릭하면 myDiv 요소의 클래스가 추가, 삭제, 토글
        function toggleClass() {
            var myDiv = document.getElementById('myDiv');
            myDiv.classList.add('high');
            myDiv.classList.remove('high');
            myDiv.classList.toggle('highlight');
        }

        // document.createElement('tag'), element.appendChild(child) 예시
        // Create New Element 버튼을 클릭하면 새로운 <div> 요소가 생성되고 컨테이너에 추가
        function createNewElement() {
            var container = document.getElementById('container');
            var newDiv = document.createElement('div');
            newDiv.textContent = 'Newly Created Element';
            container.appendChild(newDiv);
        }

        // element.remove() 예시
        // Remove Element 버튼을 클릭하면 removeMe 요소가 삭제
        function removeElement() {
            var removeMe = document.getElementById('removeMe');
            removeMe.remove();
        }
    </script>
</body>

이벤트 처리

element.addEventListener('event', function) : HTML 요소에 이벤트 리스너를 추가

event.preventDefault() : 이벤트의 기본 동작을 중지.

event.stopPropagation() : 이벤트의 상위 요소로의 전파를 중지

<body>
    <!-- element.addEventListener('event', function) -->
    <button id="myButton">Click Me</button>
    <p id="message"></p>

    <!-- event.preventDefault() -->
    <a href="https://www.example.com" id="myLink">Go to Example.com</a>

    <!-- event.stopPropagation() -->
    <div id="outer">
        <div id="inner">Inner Div</div>
    </div>

    <script>
        // element.addEventListener('event', function) 예시
        // Click Me 버튼을 클릭하면 메시지가 표시
        var button = document.getElementById('myButton');
        var message = document.getElementById('message');

        button.addEventListener('click', function() {
            message.textContent = 'Button Clicked!';
        });

        // event.preventDefault() 예시
        // Go to Example.com 링크를 클릭하면 경고창이 표시되지만 
        // 기본 동작(페이지 이동)이 발생하지 않습니다.
        var link = document.getElementById('myLink');

        link.addEventListener('click', function(event) {
            event.preventDefault();
            alert('Link Clicked, but default action prevented!');
        });

        // event.stopPropagation() 예시
        // 내부 <div>를 클릭하면 내부 및 외부 <div>에 대한 각각의 클릭 이벤트가 발생하지만
        // 내부 <div> 클릭 시 이벤트 전파가 중지되어 
        // 외부 <div>의 이벤트가 발생하지 않습니다.
        var outerDiv = document.getElementById('outer');
        var innerDiv = document.getElementById('inner');

        outerDiv.addEventListener('click', function() {
            alert('Outer Div Clicked!');
        });

        innerDiv.addEventListener('click', function(event) {
            event.stopPropagation();
            alert('Inner Div Clicked, but event propagation stopped!');
        });
    </script>
</body>

728x90

'JavaScript' 카테고리의 다른 글

이벤트 전파 (0)	2024.04.22
이벤트 (0)	2024.04.22
Promise.all과 Promise.race (0)	2024.04.21
async/await (0)	2024.04.21
Promise (1)	2024.04.21

새싹 틔우기 🌱

DOM

DOM

문서 객체 모델 DOM(Document Object Moder)

JavaScript에서의 DOM

요소 선택

요소 가져오기

요소 조작

이벤트 처리

'JavaScript' 카테고리의 다른 글

티스토리툴바

DOM

문서 객체 모델 DOM(Document Object Moder)

JavaScript에서의 DOM

요소 선택

요소 가져오기

요소 조작

이벤트 처리

'JavaScript' 카테고리의 다른 글

관련글

티스토리툴바