ใช้ getElementsByClassName() ดึง Element แล้ววนลูปตรวจสอบ InnerHTML ถ้าตรงเงื่อนไขให้ 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>Hide Div by Text</title>
</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')คืน HTMLCollection (Live Collection)- วนลูปด้วย for ปกติ (ไม่ใช่ forEach เพราะเป็น Array-like)
innerHTML.trim()ตัด Whitespace หน้า/หลังstyle.display = 'none'ซ่อน Element เลย (ไม่ครอบพื้นที่)- วิธีสมัยใหม่:
document.querySelectorAll('.block').forEach(el => ...)
ผลลัพธ์
แสดงเฉพาะ "content" | "header" และ "footer" ถูกซ่อน
