ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JavaScript DOM에 대한 이해
    Front-end/Javascript 2023. 5. 21. 22:19
    반응형

     

     

    개요

    JavaScript는 Document Object Model (DOM)을 통해 HTML 문서의 요소들을 조작할 수 있습니다. DOM은 웹 페이지의 구조를 트리 형태로 표현하고, 각 요소에 대한 접근과 수정을 가능하게 합니다. 이번 글에서는 DOM의 다양한 기능과 주요 메소드에 대해 알아보겠습니다.

    1. getElementById

    getElementById 메소드는 주어진 id 속성 값에 해당하는 요소를 가져옵니다.

    const element = document.getElementById('myElement');
    

    위의 코드에서 getElementById를 사용하여 'myElement'라는 id를 가진 요소를 가져옵니다.

    2. getElementsByTagName

    getElementsByTagName 메소드는 주어진 태그 이름에 해당하는 모든 요소를 가져옵니다.

    const elements = document.getElementsByTagName('div');
    

    위의 코드에서 getElementsByTagName을 사용하여 'div' 태그를 가진 모든 요소를 가져옵니다.

    3. getElementsByClassName

    getElementsByClassName 메소드는 주어진 클래스 이름에 해당하는 모든 요소를 가져옵니다.

    const elements = document.getElementsByClassName('myClass');
    

    위의 코드에서 getElementsByClassName을 사용하여 'myClass'라는 클래스를 가진 모든 요소를 가져옵니다.

    4. querySelector

    querySelector 메소드는 주어진 CSS 선택자에 해당하는 첫 번째 요소를 가져옵니다.

    const element = document.querySelector('#myElement');
    

    위의 코드에서 querySelector를 사용하여 id가 'myElement'인 첫 번째 요소를 가져옵니다.

    5. querySelectorAll

    querySelectorAll 메소드는 주어진 CSS 선택자에 해당하는 모든 요소를 가져옵니다.

    const elements = document.querySelectorAll('.myClass');
    

    위의 코드에서 querySelectorAll을 사용하여 클래스가 'myClass'인 모든 요소를 가져옵니다.

    6. innerHTML

    innerHTML 속성은 요소의 내부 HTML 코드를 가져오거나 설정합니다.

    const element = document.getElementById('myElement');
    console.log(element.innerHTML);
    

    위의 코드에서 innerHTML을 사용하여 'myElement'의 내부 HTML 코드를 가져와서 콘솔에 출력합니다.

    7. textContent

    textContent 속성은 요소의 텍스트 내용을 가져오거나 설정합니다.

    const element = document.getElementById('myElement');
    console.log(element.textContent);
    

    위의 코드에서 textContent를 사용하여 'myElement'의 텍스트 내용을 가져와서 콘솔에 출력합니다.

    8. innerText

    innerText 속성은 요소의 텍스트 내용을 가져오거나 설정합니다. innerText는 CSS로 숨겨진 요소의 내용을 가져오지 않습니다.

    const element = document.getElementById('myElement');
    console.log(element.innerText);
    

    위의 코드에서 innerText를 사용하여 'myElement'의 텍스트 내용을 가져와서 콘솔에 출력합니다.

    9. getAttribute

    getAttribute 메소드는 요소의 특정 속성 값을 가져옵니다.

    const element = document.getElementById('myElement');
    const value = element.getAttribute('src');
    

    위의 코드에서 getAttribute를 사용하여 'myElement'의 'src' 속성 값을 가져옵니다.

    10. setAttribute

    setAttribute 메소드는 요소의 특정 속성 값을 설정합니다.

    const element = document.getElementById('myElement');
    element.setAttribute('src', 'image.jpg');
    

    위의 코드에서 setAttribute를 사용하여 'myElement'의 'src' 속성 값을 'image.jpg'로 설정합니다.

    11. style

    style 속성을 사용하여 요소의 스타일을 변경할 수 있습니다.

    const element = document.getElementById('myElement');
    element.style.color = 'red';
    element.style.fontSize = '20px';
    

    위의 코드에서 .style을 사용하여 'myElement'의 글자 색상을 빨간색으로, 글자 크기를 20px로 변경합니다.

    12. classList

    classList 속성은 요소의 클래스 목록을 가져오고 추가/제거/토글할 수 있습니다.

    const element = document.getElementById('myElement');
    element.classList.add('newClass');
    element.classList.remove('oldClass');
    element.classList.toggle('active');
    

    위의 코드에서 classList를 사용하여 'myElement'에 'newClass'를 추가하고 'oldClass'를 제거한 뒤, 'active' 클래스의 토글 동작을 수행합니다.

    13. add / removeChild

    addChild 메소드는 부모 요소에 자식 요소를 추가합니다. removeChild 메소드는 부모 요소에서 자식 요소를 제거합니다.

    const parent
    
     = document.getElementById('parentElement');
    const child = document.getElementById('childElement');
    
    parent.appendChild(child); // 자식 요소 추가
    parent.removeChild(child); // 자식 요소 제거
    

    위의 코드에서 addChild를 사용하여 'parentElement'에 'childElement'를 추가한 뒤, removeChild를 사용하여 다시 제거합니다.

    14. Toggle

    Toggle 메소드는 클래스의 추가와 제거를 번갈아가며 수행합니다.

    const element = document.getElementById('myElement');
    element.classList.toggle('active');
    

    위의 코드에서 toggle을 사용하여 'myElement'에 'active' 클래스를 토글합니다.

    15. contains

    contains 메소드는 요소가 특정 클래스를 포함하는지 여부를 확인합니다.

    const element = document.getElementById('myElement');
    const hasClass = element.classList.contains('myClass');
    console.log(hasClass);
    

    위의 코드에서 contains를 사용하여 'myElement'가 'myClass'를 포함하는지 여부를 확인하고, 그 결과를 콘솔에 출력합니다.

    16. parentElement

    parentElement 속성은 요소의 부모 요소를 가져옵니다.

    const element = document.getElementById('myElement');
    const parent = element.parentElement;
    

    위의 코드에서 parentElement를 사용하여 'myElement'의 부모 요소를 가져옵니다.

    17. childElementCount / children

    childElementCount 속성은 요소의 자식 요소의 개수를 반환합니다. children 속성은 자식 요소의 목록을 반환합니다.

    const parent = document.getElementById('parentElement');
    const childCount = parent.childElementCount;
    const children = parent.children;
    

    위의 코드에서 childElementCount를 사용하여 'parentElement'의 자식 요소 개수를 가져오고, children을 사용하여 자식 요소의 목록을 가져옵니다.

    18. PreviousSibling / nextSibling

    PreviousSibling 속성은 이전 형제 요소를, nextSibling 속성은 다음 형제 요소를 가져옵니다.

    const element = document.getElementById('myElement');
    const previousSibling = element.previousSibling;
    const nextSibling = element.nextSibling;
    

    위의 코드에서 PreviousSibling을 사용하여 'myElement'의 이전 형제 요소를 가져오고, nextSibling을 사용하여 다음 형제 요소를 가져옵니다.

    19. Append / AppendChild / prepend

    append와 appendChild 메소드는 요소의 자식 요소를 추가합니다. prepend 메소드는 첫 번째 자식 요소로 추가합니다.

    const parent = document.getElementById('parentElement');
    const child = document
    
    .getElementById('childElement');
    
    parent.append(child); // 마지막 자식 요소로 추가
    parent.appendChild(child); // 마지막 자식 요소로 추가
    parent.prepend(child); // 첫 번째 자식 요소로 추가
    

    위의 코드에서 append와 appendChild를 사용하여 'parentElement'의 마지막 자식 요소로 'childElement'를 추가하고, prepend를 사용하여 첫 번째 자식 요소로 추가합니다.

    20. createElement

    createElement 메소드를 사용하여 새로운 요소를 생성합니다.

    const newElement = document.createElement('div');
    newElement.textContent = '새로운 요소';
    
    const parent = document.getElementById('parentElement');
    parent.appendChild(newElement);
    

    위의 코드에서 createElement를 사용하여 'div' 요소를 생성하고, textContent를 설정한 뒤, appendChild를 사용하여 'parentElement'에 추가합니다.

    결론

    JavaScript의 DOM은 HTML 문서의 요소들을 동적으로 조작할 수 있는 강력한 도구입니다. getElementById, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll 등의 메소드를 사용하여 요소에 접근하고, innerHTML, textContent, innerText 등을 통해 내용을 수정하며, getAttribute, setAttribute를 사용하여 속성을 조작할 수 있습니다. 또한, 클래스 관리를 위해 classList를 사용하고, 요소의 구조를 변경하기 위해 append, appendChild, prepend, removeChild 등의 메소드를 활용할 수 있습니다.

    더 자세한 정보는 MDN에서 확인하실 수 있습니다.

    반응형

    댓글

Designed by Tistory.