JS - 连接 <h1> 和 <title>答案

【问题标题】：JS - Connect <h1> with <title>JS - 连接 <h1> 和 <title>
【发布时间】：2022-01-14 23:24:39
【问题描述】：

我要做的就是使标题与 h1 标签完全相同。

<title class="blogtitle"></title>
<h1 class="title">Updating our staff members</h1>

<script>
        document.getElementsByClassName("blogtitle")[0].innerHTML = h1;
        var h1 = document.getElementsByClassName("title")
</script>

【问题讨论】：

这对 SEO 和可访问性都非常不利。不要为此使用 JS。使用允许在服务器上执行此操作的模板引擎。
你能解释一下吗？
在大多数情况下，搜索引擎和屏幕阅读器都会解析从服务器传输到浏览器的 HTML，而不是您的 Javascript 稍后修改的 HTML。
@connexo 你确定吗？十年来，Google 等都能够用 js 解析网站
Google 不是唯一的搜索引擎；到目前为止，我并不完全了解屏幕阅读器在这方面的表现如何。对于像title 这样的 SEO/可访问性至关重要的部分，不使用 JS 仍然要安全得多。

标签： javascript html css

【解决方案1】：

这对 SEO 和可访问性都非常不利。不要为此使用 JS。使用允许在服务器上执行此操作的模板引擎。

话虽如此，如果搜索引擎优化或可访问性与您的项目有任何相关性，那么您不应该使用执行此操作的 Javascript。

document.addEventListener('DOMContentLoaded', // make sure this code only runs once JS can access the DOM safely
  function() { //
    document.title = document.querySelector('h1.title')?.textContent ?? '';
  }
);

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
</head>

<body>
  <h1 class="title">Updating our staff members</h1>
</body>

</html>

除了使用DOMContentLoaded 侦听器（仅用于确保页面中的所有元素都可以通过Javascript 访问），您还可以在关闭</body> 之前包含<script> 标签标签：

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
</head>

<body>
  <h1 class="title">Updating our staff members</h1>
  <script>
    document.title = document.querySelector('h1.title')?.textContent ?? '';
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

嗯，看起来您只是在学习 HTML 并进入这个新世界。所以我只会回答你的问题，不会用一堆高级信息让你负担过重。

您可以使用更改页面标题

document.title = 'Your new title'

所以你可以按照这些思路做一些事情：

var h1Element = document.getElementsByClassName("title")[0] // you can use other selectors here such as querySelector, getElementByClassName...
var h1Text = h1Element.innerHTML
document.title = h1Text

另外，你不应该把一个类放到一个标题标签中，它必须在一个<head>标签内。

只要记住 HTML 的基本结构即可：

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

【讨论】：

不要让一堆高级信息让你不堪重负我们都知道下一个问题会是什么。 “为什么我的页面标题'未定义'？”。此外，您的代码var h1Text = h1Element .innerHTML 中有语法错误（删除. 和innerHTML 之间的空格）。其次，在这里使用innerHTML 也很糟糕——如果h1 包含其他HTML 元素怎么办？这些将在文档标题中显示为文本。
@connexo 这不是语法错误。以这种方式编写它不是标准做法，但这样做是完全有效的。
@Sean 好点！但这不仅是“不标准的做法”，而且绝对是不好的做法。
@connexo 这是见仁见智的问题。访问属性或链接方法中的空格可以helpfully improve readability in ways that are recommended good practice。
10000 名开发人员中有 9999 名肯定会不同意 h1 .innerHTML。不应该被解雇的那个。您引用的示例推荐了一种做法，该做法始终涉及您建议的空白处的换行符，这非常好且令人愉快。