首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JS,将<h1>与<title>连接

JS,将<h1>与<title>连接
EN

Stack Overflow用户
提问于 2022-01-14 15:24:39
回答 2查看 109关注 0票数 0

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

代码语言:javascript
运行
AI代码解释
复制
<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>
EN

回答 2

Stack Overflow用户

发布于 2022-01-14 15:33:15

这将是非常糟糕的SEO和可访问性。不要用JS来做这个。使用允许在服务器上执行此操作的模板引擎。

尽管如此,这里的Javascript会这样做,如果搜索引擎优化或可访问性在您的项目中有任何关联,您就不应该使用它。

代码语言:javascript
运行
AI代码解释
复制
document.addEventListener('DOMContentLoaded', // make sure this code only runs once JS can access the DOM safely
  function() { //
    document.title = document.querySelector('h1.title')?.textContent ?? '';
  }
);
代码语言:javascript
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">

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

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

</html>

与其使用DOMContentLoaded侦听器(仅用于确保页面中的所有元素都可通过Javascript进行访问),还可以在关闭的</body>标记之前包含</body>标记:

代码语言:javascript
运行
AI代码解释
复制
<!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
EN

Stack Overflow用户

发布于 2022-01-14 15:33:20

嗯,看起来你只是在学习HTML,进入这个新的世界。所以,我只会回答你的问题,而不是用一堆先进的信息过载你。

可以通过以下方法更改页的标题

代码语言:javascript
运行
AI代码解释
复制
document.title = 'Your new title'

所以你可以这样做:

代码语言:javascript
运行
AI代码解释
复制
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的基本结构:

代码语言:javascript
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>

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

</body>
</html>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70717596

复制
相关文章
Python3中get与post请求
urllib.request 模块定义了一些类及方法,用于帮助我们访问URL urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capath=None, cadefault=False) 方法是用来打开url的方法,其中url可以是一个合法的url字符串,或者是一个request对象;data必须是字节数据类型的。详细介绍可参见python3官方文档urllib.request。 关于数据提交的两种方式get、post的
听城
2018/04/27
1.5K0
使用OpenCV和Python计算视频中的总帧数
本文来自光头哥哥的博客【Count the total number of frames in a video with penCV and Python】,仅做学习分享。
周旋
2020/10/23
3.8K0
使用OpenCV和Python计算视频中的总帧数
接口测试如何在post请求中传递文件
2.找到body这个选项,输入文件对应的参数名,在然后把参数名后面的text选择为file。
sik1
2022/06/21
3.6K0
【小家Java】Servlet规范之---请求(request):Servlet中如何获取POST请求参数?(使用getParameter())
request对象封装了来自客户端的所有请求信息。在HTTP协议中,客户端发给服务端的所有信息都是通过request对象的请求头和请求体来传送的。
YourBatman
2019/09/03
14.1K0
【小家Java】Servlet规范之---请求(request):Servlet中如何获取POST请求参数?(使用getParameter())
直接取出 post 请求中的 json、得请求体参数、查看 post 请求参数
方法如下: try{ ServletRequestAttributes requestAttributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes(); HttpServletRequest request = requestAttributes.getRequest(); StringBuffer sb = new S
微风-- 轻许--
2022/04/13
5.1K0
python使用request发送post请求
唯一Chat
2023/09/15
3350
python post请求
post请求只需构建一个Request对象,并把参数传递给Request对象的data属性即可(也可以在urlopen方法中传递给data参数)。
灯珑LoGin
2022/10/31
1.9K0
http请求中get和post方法的区别
一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式。
用户7880705
2020/11/06
5.1K0
SpringMVC源码分析:POST请求中的文件处理
本章我们来一起阅读和分析SpringMVC的部分源码,看看收到POST请求中的二进制文件后,SpingMVC框架是如何处理的;
程序员欣宸
2020/02/13
1.6K0
Gatsby 中怎么加载使用视频文件?
一、简介 Gatsby 项目中怎么播放视频? 二、解决方案 1、HTML5 <video> 使用 HTML5 的 video 标签,播放 本地视频 和 远程视频。 import * as React from 'react' import dog from '../assets/dog.mp4' const VideoShow = () => { return ( <div> <video width="70%" controls>
Learn-anything.cn
2021/12/02
7420
Qt中实现http服务接收POST请求
总体而言,HTTP服务器适用于传统的客户端-服务器通信,每次请求都需要重新建立连接,适合请求响应式的场景。WebSocket服务器适用于需要实时双向通信的场景,适合聊天应用、实时数据更新等。
Linux兵工厂
2023/09/15
1.6K0
Qt中实现http服务接收POST请求
Python爬虫中:get和post方法使用
requests库是一个常用于http请求的模块,性质是和urllib,urllib2是一样的,作用就是向指定目标网站的后台服务器发起请求,并接收服务器返回的响应内容。
Python学习者
2023/02/16
1.2K0
python 异步post请求
import aiohttp headers = {'User-Agent': 'Dalvik/2.1.0 (Linux; U; Android 6.0.1; Nexus 5 Build/MMB29K) tuhuAndroid 5.24.6', 'content-type': 'application/json'} async with aiohttp.ClientSession(headers=headers) as sess:
Wyc
2021/08/13
3.6K0
POST请求实践--视频演示
讲完get,轮到post请求了,本期分享了post请求的实现,分享了一些参数依赖的情况。录制过程中翻车了好几次,各位见谅。
FunTester
2020/03/23
5220
HTTP协议中的GET、POST请求方法的区别
HTTP 请求方法有:HEAD、PUT、DELETE、OPTIONS、CONNECT
宣言言言
2019/12/15
5.1K0
OpenCV中OpenMP的使用
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/
流川疯
2019/01/18
1.6K0
Node中POST请求的正确处理方式
Node的 http 模块只对HTTP报文的头部进行了解析,然后触发 request 事件。如果请求中还带有内容部分(如 POST 请求,它具有报头和内容),内容部分需要用户自行接收和解析。
Qiang
2019/06/20
2.1K0
Node中POST请求的正确处理方式
如何使用OpenCV在Python中访问IP摄像头
首先,必须找出网址流是什么。通过在构造函数中提供摄像机的网址流,可以在OpenCV中访问IP摄像机cv2.VideoCapture。可以使用某些网络扫描实用程序(例如在linux上的arp-scan)找到摄像机的IP地址。网址进一步的细节,如Protocol,Credentials和Channel应该可以在相机说明书或软件/手机应用程序中找到。我们通过在网络上搜索相机的型号来找到相机的网址流。
小白学视觉
2020/09/14
6.9K0
防止页面url缓存中 ajax中post 请求的处理方式
一般我们在开发中经常会用到Ajax请求,异步发送请求,然后获取我们想要的数据,在Ajax中使用Get请求数据不会有页面缓存的问题,而使用POST请求可是有时候页面会缓存我们提交的信息,导致我们发送的异步请求不能正确的返回我们想要的数据,那么遇到这种情况,我们应该怎么办呢???
全栈程序员站长
2022/07/19
1.6K0
点击加载更多

相似问题

为什么jQuery remove不适用于动态添加的行?

20

Jquery不适用于动态添加的DIVS

24

JQuery .remove()不适用于动态添加的元素

21

jQuery插件不适用于动态添加的元素

48

jQuery .on()事件不适用于动态添加的元素

36
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档