3. JavaScript 요소(Content) 접근

JavaScript를 사용하면 HTML 문서 내의 요소들에 접근하고, 이들의 스타일이나 내용을 동적으로 변경할 수 있습니다. 이번 글에서는 다양한 방법으로 HTML 요소에 접근하는 방법을 다루어 보겠습니다.

1. 아이디를 이용해서 요소 가져오기

id 속성은 HTML 요소를 고유하게 식별하기 위해 사용됩니다. 이를 통해 특정 요소에 직접 접근할 수 있습니다.

예제 코드

function accessId(){
    let area1 = document.getElementById("area1");

    area1.style.background = "yellow";
    area1.style.color = "red";
    area1.style.width = "200px";
    area1.style.height = "200px";

    area1.innerText = "클릭된 area1 영역";
}

• document.getElementById("아이디명")을 사용하면 해당 id를 가진 요소에 접근할 수 있습니다.
• style 속성을 이용해 요소의 스타일을 동적으로 변경할 수 있습니다.
• innerText를 통해 요소의 텍스트를 수정할 수 있습니다.

2. 태그명으로 요소 가져오기

HTML 문서에서 특정 태그를 가진 모든 요소를 가져오고 싶을 때, getElementsByTagName() 메서드를 사용할 수 있습니다.

예제 코드

function accessTagName(){
    let list = document.getElementsByTagName("li");

    for(let i = 0; i < list.length; i++){
        list[i].innerHTML = (i+1) + "번째 요소입니다.";
        list[i].style.color = "red";
    }
}

• document.getElementsByTagName("태그명")을 사용하면 지정한 태그를 가진 모든 요소가 배열 형태로 반환됩니다.
• 반복문을 통해 각 요소에 접근하여 내용을 수정하거나 스타일을 변경할 수 있습니다.

3. name 속성값을 이용해서 요소 가져오기

name 속성은 보통 폼 요소에서 그룹화된 입력 필드를 참조할 때 사용됩니다. 이를 통해 동일한 name을 가진 요소들에 접근할 수 있습니다.

예제 코드

function allCheck(){
    let allCheckBox = document.getElementById("all");
    let hobbyList = document.getElementsByName("hobby");

    for(let checkbox of hobbyList){
        checkbox.checked = allCheckBox.checked;
    }
}

• document.getElementsByName("name값")을 사용하면 해당 name을 가진 모든 요소를 배열로 반환받습니다.
• 이를 활용해 여러 체크박스의 상태를 일괄적으로 제어할 수 있습니다.

4. class로 접근하기

HTML 요소는 class 속성을 통해 그룹화할 수 있습니다. class로 요소에 접근할 때는 getElementsByClassName() 메서드를 사용합니다.

예제 코드

function accessClass(){
    let arr = document.getElementsByClassName("test");

    for(let unit of arr){
        unit.innerHTML = "text를 클래스로 가지고 있는 요소";
    }
}

• document.getElementsByClassName("클래스명")을 사용하면 해당 class를 가진 모든 요소가 배열로 반환됩니다.
• 반환된 요소들에 접근하여 내용을 변경할 수 있습니다.

5. 선택자 활용하기

보다 복잡한 CSS 선택자를 사용하여 요소를 선택할 수 있습니다. 이때 querySelector()와 querySelectorAll()을 사용합니다.

예제 코드

function accessSelector(){
    const divT1 = document.querySelector("#tmp1");
    const h2T1 = document.querySelectorAll("#tmp2 > h2");
    const spanE1 = document.querySelector("#tmp2 + span");

    console.log(divT1);
    console.log(h2T1);
    console.log(spanE1);
}

• querySelector()는 지정한 선택자와 일치하는 첫 번째 요소만을 반환합니다.
• querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 배열로 반환합니다.