특정 텍스트가 포함된 div 요소를 화면에서 숨기려면 먼저 getElementsByClassName() 메서드를 사용해 같은 클래스명을 가진 div 요소들을 모두 가져와야 합니다. 이후 for 반복문으로 각 요소를 하나씩 순회하면서 OR(||) 조건을 활용해 원하는 텍스트와 일치하는지 확인합니다.
조건이 일치하는 div에는 yourDiv.style.display = 'none' 값을 설정하면 해당 요소가 화면에서 사라지게 됩니다.
다음은 실제로 동작하는 전체 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="block">
header
</div>
<div class="block">
content
</div>
<div class="block">
footer
</div>
<script>
let attribute = document.getElementsByClassName('block');
for (let i = 0; i < attribute.length; i++) {
let impDiv = attribute[i];
let value = impDiv.innerHTML.trim();
if (value == 'header' || value == 'footer') {
impDiv.style.display = 'none';
}
}
</script>
</body>
</html>코드 설명
- getElementsByClassName('block') : 클래스명이 'block'인 모든 div 요소를 컬렉션 형태로 가져옵니다.
- innerHTML.trim() : 각 div 내부의 텍스트를 추출하고 앞뒤 공백을 제거해 정확하게 비교할 수 있도록 합니다.
- OR(||) 조건 : 텍스트가 'header' 또는 'footer'와 일치하는 경우에만 숨김 처리합니다.
- style.display = 'none' : 조건에 맞는 요소를 화면에서 완전히 숨깁니다.
위 프로그램을 실행하려면 파일을 anyName.html(index.html)이라는 이름으로 저장하세요. 그런 다음 VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 브라우저에서 결과를 바로 확인할 수 있습니다.
실행 결과
