从某些页面中删除标题反应导航 - Javascript

有时候，一个网页的标题导航栏可能会干扰到用户的阅读体验。如果你想在特定页面中隐藏或删除这些导航栏，你可以使用 Javascript。

获取页面中的标题

在 Javascript 中，你可以使用 document.getElementsByTagName 函数来获取所有的 <h1> 到 <h6> 标题。该函数将返回一个类型为 HTMLCollection（或者是 NodeList）的数组，其中包含了页面中所有相应标签。

var headings = document.getElementsByTagName('h1');

你也可以使用 querySelectorAll 函数或 jQuery 进行选择元素。

隐藏或删除标题

一旦你获取了所有的标题，你可以使用 style.display 属性来隐藏它们。

for (var i = 0; i < headings.length; i++) {
  headings[i].style.display = 'none';
}

上述代码将所有标题的 display 样式设置为 none，即隐藏它们。如果你想要删除这些标题，可以使用 removeChild 函数：

var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
for (var i = 0; i < headings.length; i++) {
  headings[i].parentNode.removeChild(headings[i]);
}

上述代码将从页面中删除所有标题元素。

添加条件

为了避免你的代码对网站的所有网页生效，你可以添加条件，例如只在特定的页面中运行代码。你可以使用 window.location.href 来获取当前页面的 URL，然后使用字符串匹配或正则表达式来检查特定的关键字或模式。例如：

if (window.location.href.indexOf('example.com/blog/') > -1) {
  // 在 /blog/ 页面中隐藏标题
  var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  for (var i = 0; i < headings.length; i++) {
    headings[i].style.display = 'none';
  }
}

总结

使用 Javascript 可以在特定页面中隐藏或删除标题导航栏。你可以使用 document.getElementsByTagName 或 querySelectorAll 来选择页面中的标题，然后使用 style.display 属性隐藏它们，或使用 removeChild 函数从页面中删除它们。你也可以添加条件来限制代码只在特定页面中运行。