웹 개발 영역에서 HTML은 웹 페이지의 뼈대를 형성하고 JavaScript는 웹 페이지에 생명을 불어넣습니다. JavaScript를 사용하여 HTML 정보를 노출하고 조작하는 방법을 이해하는 것은 동적인 대화형 웹 애플리케이션을 만드는 데 중요합니다. 이 문서에서는 JavaScript를 사용하여 HTML 콘텐츠에 액세스하고 수정하는 핵심 기술을 자세히 설명합니다.

1. HTML 요소에 접근하기

getElementById 사용

HTML 요소에 액세스하는 가장 간단한 방법 중 하나는 해당 요소의 id 속성을 사용하는 것입니다. document.getElementById 메소드는 지정된 값을 가진 ID 속성이 있는 요소를 반환합니다.

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

getElementsByClassName 사용

동일한 클래스 이름을 가진 여러 요소에 액세스하려면 document.getElementsByClassName이 사용됩니다. 이 메소드는 요소의 라이브 HTMLCollection을 반환합니다.

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

getElementsByTagName 사용

태그 이름으로 요소에 액세스하려면 document.getElementsByTagName을 활용할 수 있습니다. 이 메소드는 주어진 태그 이름을 가진 요소의 라이브 HTMLCollection을 반환합니다.

let paragraphs = document.getElementsByTagName('p');

querySelector 및 querySelectorAll 사용

보다 복잡한 선택의 경우 querySelector 및 querySelectorAll이 강력한 솔루션을 제공합니다. querySelector는 지정된 CSS 선택기와 일치하는 첫 번째 요소를 반환하고, querySelectorAll은 일치하는 모든 요소를 ​​반환합니다.

let firstElement = document.querySelector('.myClass');
let allElements = document.querySelectorAll('.myClass');

2. HTML 콘텐츠 조작

내부 HTML 변경

innerHTML 속성을 사용하면 요소 내부의 HTML 콘텐츠를 가져오거나 설정할 수 있습니다. 이는 웹페이지의 콘텐츠를 동적으로 업데이트하는 데 유용합니다.

let element = document.getElementById('myElement');
element.innerHTML = '
New content
';

내부 텍스트 변경

요소의 텍스트 내용만 수정하려면 innerText 또는 textContent 속성을 사용하세요. innerHTML과 달리 이러한 속성은 HTML 태그를 구문 분석하지 않습니다.

let element = document.getElementById('myElement');
element.innerText = 'New text content';

속성 수정

setAttribute 메소드를 사용하거나 속성 속성에 직접 액세스하여 요소의 속성을 변경할 수 있습니다.

let element = document.getElementById('myElement');
element.setAttribute('src', 'newImage.jpg');

// Or directly
element.src = 'newImage.jpg';

클래스 추가 및 제거

JavaScript는 요소의 클래스를 추가, 제거 및 전환할 수 있는 classList 속성을 제공합니다. 이는 CSS 스타일을 동적으로 조작하는 데 특히 유용합니다.

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

3. 요소 생성 및 제거

새로운 요소 만들기

document.createElement 메소드는 새로운 HTML 요소를 생성하는 데 사용됩니다. 요소를 생성한 후,appendChild 또는 insertBefore.
와 같은 메소드를 사용하여 DOM에 요소를 추가할 수 있습니다.

let newElement = document.createElement('div');
newElement.innerHTML = 'I am a new element';
document.body.appendChild(newElement);

요소 제거

요소를 제거하려면 RemoveChild 메소드를 사용하세요. 먼저 제거하려는 요소의 상위 노드에 액세스한 다음 해당 요소에 대해 RemoveChild를 호출합니다.

let parent = document.getElementById('parentElement');
let child = document.getElementById('childElement');
parent.removeChild(child);

요소 교체

replaceChild 메소드를 사용하면 기존 하위 노드를 새 노드로 바꿀 수 있습니다.

let parent = document.getElementById('parentElement');
let oldChild = document.getElementById('oldChild');
let newChild = document.createElement('div');
newChild.innerHTML = 'I am a new child';
parent.replaceChild(newChild, oldChild);

4. 이벤트 처리

이벤트 리스너 추가

이벤트 리스너를 사용하면 사용자 상호 작용에 응답하여 JavaScript 코드를 실행할 수 있습니다. addEventListener 메소드는 동일한 유형의 여러 이벤트를 요소에 추가할 수 있으므로 이벤트를 추가하는 데 선호되는 방법입니다.

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

이벤트 리스너 제거

removeEventListener 메소드를 사용하여 이벤트 리스너를 제거할 수도 있습니다. 이를 위해서는 이벤트 리스너 생성 중에 사용된 정확한 함수를 참조해야 합니다.

function handleClick() {
    alert('Button clicked!');
}

let button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

// Later on...
button.removeEventListener('click', handleClick);

5. 양식 작업

양식 값에 액세스

양식 요소의 값에 액세스하려면 value 속성을 사용합니다. 이는 사용자 입력을 읽는 데 유용합니다.

let input = document.getElementById('myInput');
let inputValue = input.value;

양식 유효성 검사

JavaScript를 사용하여 제출 전에 양식 입력의 유효성을 검사할 수 있습니다. 이는 즉각적인 피드백을 제공하여 사용자 경험을 향상시킵니다.

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    let input = document.getElementById('myInput');
    if (input.value === '') {
        alert('Input cannot be empty');
        event.preventDefault();
    }
});

결론

JavaScript를 사용하여 HTML 정보를 노출하고 조작하는 기술을 익히면 동적인 대화형 웹 애플리케이션을 만들 수 있는 가능성의 세계가 열립니다. JavaScript에서 사용할 수 있는 다양한 방법과 속성을 활용하면 웹 페이지의 콘텐츠와 구조를 효율적으로 관리하고 조작하여 풍부하고 매력적인 사용자 경험을 제공할 수 있습니다. 웹 개발 기술을 향상할 수 있는 더 많은 방법을 찾으려면 계속해서 실험하고 탐구하세요!