如何通过浏览器控制台为无类名ID的<footer>标签设置display:none

你之前执行的document.getElementsByClassName("footer")[0].style.display = "none";无法生效，是因为目标元素是无class、无ID的原生<footer>标签，类名选择器只能匹配带对应class属性的元素，自然无法选中这个标签。

根据页面场景选对应写法即可，直接粘贴到浏览器控制台执行就能生效：

• 页面仅存在1个footer元素时（也就是你当前遇到的场景，最简便写法）

document.querySelector('footer').style.display = 'none';

• 页面存在多个footer，需要隐藏全部footer元素时

const footerList = document.getElementsByTagName('footer');
Array.from(footerList).forEach(footerItem => {
  footerItem.style.display = 'none';
})

• 需要精准匹配特定位置的footer时，比如匹配body下直接挂载的第一层footer，避免选中嵌套在其他容器里的footer

document.querySelector('body > footer').style.display = 'none';

• 无class、无ID的原生DOM元素，优先用标签名选择器匹配即可，querySelector(标签名)匹配到第一个符合规则的元素，querySelectorAll(标签名)会返回所有符合规则的元素集合
• 正式执行隐藏代码前，可以先单独运行选择器部分（比如document.querySelector('footer')），控制台返回的DOM元素如果和你要隐藏的目标一致，再追加样式设置代码，避免误改其他元素

内容的提问来源于stack exchange，提问作者Ali Koçaslan