如何使用原生JavaScript隐藏页面中的DOM元素

以下是适合初学者的几种常用实现方案，所有方法均为纯原生JS实现，不需要引入任何框架：

基础前提 #

操作前你需要先选中目标p标签，常用的选中方法：

• 选中指定id的p标签：document.getElementById('你的标签id')
• 选中页面第一个符合条件的p标签：document.querySelector('选择器')
• 选中页面所有p标签：document.querySelectorAll('p')

常用隐藏方案 #

• 方法1：设置display: none隐藏元素，隐藏后元素完全不占据页面空间
  示例代码：

<!-- HTML结构示例 -->
<p id="targetP">这是要被隐藏的段落内容</p>
<button onclick="hideParagraph()">点击隐藏段落</button>

<!-- 建议把JS代码放在body标签末尾，避免找不到元素 -->
<script>
function hideParagraph() {
  // 选中目标p标签
  const pTag = document.getElementById('targetP')
  // 执行隐藏
  pTag.style.display = 'none'
  // 后续需要恢复显示时，执行 pTag.style.display = 'block' 即可
}
</script>

• 方法2：设置visibility: hidden隐藏元素，隐藏后元素仍保留原本的页面占位空间
  示例代码：

const pTag = document.querySelector('p')
pTag.style.visibility = 'hidden'
// 恢复显示执行 pTag.style.visibility = 'visible'

• 隐藏页面所有p标签的实现：

// 选中页面全部p标签
const allPTags = document.querySelectorAll('p')
// 遍历批量隐藏
allPTags.forEach(p => {
  p.style.display = 'none'
})

注意：如果你需要页面加载完成后自动隐藏p标签，建议把JS代码放在DOMContentLoaded事件回调中，避免JS执行时p标签还没被浏览器渲染，导致找不到元素的问题：

document.addEventListener('DOMContentLoaded', function() {
  const pTag = document.getElementById('targetP')
  pTag.style.display = 'none'
})

内容的提问来源于stack exchange，提问作者RocketFuel