이번에는 자바스크립트의 DOM 탐색 기능을 사용하여 웹페이지에서 요소를 숨기거나 보이게 하는 방법에 대해 알아보겠습니다.

1. 요소 숨기기

특정 요소를 숨기려면 style 속성의 display 값을 none으로 설정합니다.

document.getElementById("elementId").style.display = "none";

2. 요소 보이기

요소를 보이게 하려면 style 속성의 display 값을 block이나 inline으로 설정합니다.

document.getElementById("elementId").style.display = "block";

위의 예시에서 getElementById 함수를 사용하여 요소를 찾았지만, 이 외에도 class 이름으로 요소를 찾는 getElementsByClassName, 태그 이름으로 요소를 찾는 getElementsByTagName, CSS 선택자를 사용하는 querySelector 등의 메서드를 통해 요소에 접근할 수 있습니다.

이러한 방법을 사용하여 웹페이지의 요소를 동적으로 조작할 수 있습니다.

결론

이렇게 자바스크립트를 사용하여 DOM을 탐색하고 웹페이지의 요소를 숨기거나 보이게 함으로써, 사용자와 상호작용하는 동적인 웹페이지를 만들 수 있습니다.

참고문헌:

• MDN web docs
• W3Schools