可通过JavaScript动态修改页面标题和元数据：一、用document.title更新标题；二、用querySelector修改meta description；三、动态创建替换title元素；四、批量更新多类meta标签；五、结合pushState与popstate实现SPA标题同步。
如果您需要在网页加载后动态修改页面标题或元数据，而不是仅依赖HTML静态定义，则可以通过JavaScript操作document对象实现。以下是几种可行的动态更新方法：
一、使用document.title属性修改页面标题
document.title是DOM中最直接控制页面标题的属性，修改它会立即反映在浏览器标签页上，并影响搜索引擎爬虫对当前页面标题的识别。
1、在<script>标签内或外部JS文件中编写代码。</script>
2、调用document.title = "新标题";语句赋值。
立即学习“前端免费学习笔记（深入）”；
3、确保该语句执行时机晚于DOM初始化，例如放在window.onload事件中或DOMContentLoaded事件监听器内。
二、通过querySelector修改meta name="description"内容
页面描述元数据通常由定义，可通过选择器定位并更新其content属性，从而动态改变SEO描述信息。
1、使用document.querySelector('meta[name="description"]')获取对应meta元素。
2、检查返回值是否为null，避免因元素不存在导致脚本报错。
3、若存在，则执行element.setAttribute("content", "新的描述文本");
三、动态创建并替换title元素
当页面未声明
标签或需完全重置标题结构时，可移除原有title节点并插入新节点，确保标题在所有上下文中（如历史记录、书签）均生效。
<p>1、执行document.querySelector("title")获取当前title元素。</p>
<p>2、调用parentNode.removeChild()将其从head中移除。</p> <div class="topic-content">
</div>
<p class="tag-wrap mt mb">
<i class="iconfont-air icon-tag"></i>标签： <span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/javascriptujy/" title="javascript">javascript</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/wordqor/" title="word">word</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/java5vn/" title="java">java</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/htmlkhx/" title="html">html</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/jsh8p/" title="js">js</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/nodeavg/" title="node">node</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/seodo4/" title="seo">seo</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/llqpz1/" title="浏览器">浏览器</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/apptlv/" title="app">app</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/lyowj/" title="路由">路由</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/wina5p/" title="win">win</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/pc0pk/" title="爬虫">爬虫</a></span>
<span class="padding"><a class="tags br" href="https://www.fsgp.cn/tags/ssyqp2f/" title="搜索引擎">搜索引擎</a></span>
</p>
<div class="art-copyright br mb">
<div><strong class="addr">本文地址：</strong>
<a href="https://www.fsgp.cn/p/baike/66861.html" target="_blank">https://www.fsgp.cn/p/baike/66861.html</a></div>
<div><span class="copyright">版权声明：</span>除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。</div>
</div>
<div class="social-widget mt clearfix h-0">
<!--打赏[可三码切换]-->
<!--点赞-->
<!--分享-->
</div>
</div>
</article>
<!-- 广告位AD5 -->
<div class="prev-next sb br mb clearfix">
<p class="post-prev fl ellipsis">
<span class="prev">上一篇</span><strong><a href="https://www.fsgp.cn/p/baike/66862.html">php怎么把数组的值放到一个新数组_PHP提取数组值到新数组</a></strong>
</p>
<p class="post-next fr ellipsis">
<span class="next">下一篇</span><strong><a href="https://www.fsgp.cn/p/baike/66864.html">javascript如何实现桌面应用_Electron的工作原理是什么</a></strong>
</p>
</div>
<!--相关文章-->
<div class="related-art sb br mb">
<p class="c-title"><span class="name">相关文章</span></p>
<ul class="ul clearfix">
<li class="related-item mt fl">
<a href="https://www.fsgp.cn/p/baike/93560.html" title="“云听中国-声音博物馆”鸿蒙元服务独家上线：走近展柜 自动听讲解！">
<span class="span br">
<img class="img br img-cover" src="https://www.fsgp.cn/zb_users/cache/thumbs/8c9c5457d79465c92bdd5b085ffcd76d-320-200-1.jpg" alt="“云听中国-声音博物馆”鸿蒙元服务独家上线：走近展柜 自动听讲解！" title="“云听中国-声音博物馆”鸿蒙元服务独家上线：走近展柜 自动听讲解！">
</span>
<p class="titile">“云听中国-声音博物馆”鸿蒙元服务独家上线：走近展柜 自动听讲解！</p>
</a>
</li>
<li class="related-item mt fl">
<a href="https://www.fsgp.cn/p/baike/93552.html" title="明年起！遛狗不拴绳最高拘10天罚1000元 律师回应">
<span class="span br">
<img class="img br img-cover" src="https://www.fsgp.cn/zb_users/cache/thumbs/611f0d641d5d16898a98e70c12a8628a-320-200-1.png" alt="明年起！遛狗不拴绳最高拘10天罚1000元 律师回应" title="明年起！遛狗不拴绳最高拘10天罚1000元 律师回应">
</span>
<p class="titile">明年起！遛狗不拴绳最高拘10天罚1000元 律师回应</p>
</a>
</li>
<li class="related-item mt fl">
<a href="https://www.fsgp.cn/p/baike/93544.html" title="荣耀全新WIN系列发布：第五代骁龙8至尊版加持，树立电竞旗舰性能新标杆">
<span class="span br">
<img class="img br img-cover" src="https://www.fsgp.cn/zb_users/cache/thumbs/6dfac1509759e9ac16f564c532f6f928-320-200-1.png" alt="荣耀全新WIN系列发布：第五代骁龙8至尊版加持，树立电竞旗舰性能新标杆" title="荣耀全新WIN系列发布：第五代骁龙8至尊版加持，树立电竞旗舰性能新标杆">
</span>
<p class="titile">荣耀全新WIN系列发布：第五代骁龙8至尊版加持，树立电竞旗舰性能新标杆</p>
</a>
</li>
<li class="related-item mt fl">
<a href="https://www.fsgp.cn/p/baike/93523.html" title="小红书回应被丽江文旅局喊话：目前所获线索 暂未发现违规情况">
<span class="span br">
<img class="img br img-cover" src="https://www.fsgp.cn/zb_users/cache/thumbs/1bd53fa62fb016c27fe54c2c3139e853-320-200-1.png" alt="小红书回应被丽江文旅局喊话：目前所获线索 暂未发现违规情况" title="小红书回应被丽江文旅局喊话：目前所获线索 暂未发现违规情况">
</span>
<p class="titile">小红书回应被丽江文旅局喊话：目前所获线索 暂未发现违规情况</p>
</a>
</li>
<li class="related-item mt fl">
<a href="https://www.fsgp.cn/p/baike/93521.html" title="内存价格起飞怎么办：转换器让SO-DIMM笔记本内存装进！">
<span class="span br">
<img class="img br img-cover" src="https://www.fsgp.cn/zb_users/cache/thumbs/8fac14118b05eb4671bbbb43c0c7b949-320-200-1.jpg" alt="内存价格起飞怎么办：转换器让SO-DIMM笔记本内存装进！" title="内存价格起飞怎么办：转换器让SO-DIMM笔记本内存装进！">
</span>
<p class="titile">内存价格起飞怎么办：转换器让SO-DIMM笔记本内存装进！</p>
</a>
</li>
<li class="related-item mt fl">
<a href="https://www.fsgp.cn/p/baike/93499.html" title="一代神卡落幕：Arch Linux正式停止支持GTX 10系列！">
<span class="span br">
<img class="img br img-cover" src="https://www.fsgp.cn/zb_users/cache/thumbs/27609b766c83cb5315c55848e6e79c7e-320-200-1.png" alt="一代神卡落幕：Arch Linux正式停止支持GTX 10系列！" title="一代神卡落幕：Arch Linux正式停止支持GTX 10系列！">
</span>
<p class="titile">一代神卡落幕：Arch Linux正式停止支持GTX 10系列！</p>
</a>
</li>
</ul>
</div>
<div id="comment" class="post-comment clearfix sb br mt">
<p id="comments-title" class="c-title mb bn"><span>发布评论</span>
<span class="comment-num">
（<span class="emphasize">0</span>条评论）
</span></p>
<div class="compost">
<form id="frmSumbit" target="_self" method="post" action="https://www.fsgp.cn/zb_system/cmd.php?act=cmt&postid=66861&key=8eae2c52b52063f8638768982b5e5f58">
<input type="hidden" name="inpId" id="inpId" value="66861"/>
<input type="hidden" name="inpRevID" id="inpRevID" value="0"/>
<div class="com-name">
<a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a>
</div>
<div class="com-info">
<ul>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址">
</li>
</ul>
</div>
<div class="com-box">
<textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1"></textarea>
</div>
<div class="com-info"><button class="com-submit br brightness" name="sumbit" type="submit" tabindex="5" onclick="return zbp.comment.post()">发布评论</button></div>
</form>
</div> <div class="comment-list mt">
<p class="no-comment"><i class="iconfont-air icon-sofa"></i>还木有评论哦，快来抢沙发吧~</p> <label id="AjaxCommentBegin"></label>
<div class="pagebar mb mt">
<div class="nav-links" >
</div>
</div>
<label id="AjaxCommentEnd"></label>
</div>
</div>
<script>
$("#on-new-reward").on("click",
function() {
$("body").append("<div id='reward-mask'></div>");
$("#new-reward").show();
});
$("#close").on("click",
function() {
$("#new-reward").hide();
$("#reward-mask").remove();
});
$(".payment-way").bind("click",
function() {
$(".qrcode-img").hide();
$(".qrCode_" + $(".payment-way").find("input[name=reward-way]:checked").val()).show();
});
</script>
</div>
<aside id="sidebar" class="hidden-sm-md-lg fr">
<div class="theiaStickySidebar">
<section id="aside_random" class="widget widget_aside_random sb br mb">
<p class="c-title mb"><span class="name">随机图文</span></p>
<ul class="widget-content aside_random"><li class="list clearfix"><a href="https://www.fsgp.cn/p/ty/651.html" title="湖南卫视在线直播观看指南-网络直播技巧与平台推荐"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/c7c6f13cd6270f1b82e6a7f82fa4b38e-120-90-1.png" alt="湖南卫视在线直播观看指南-网络直播技巧与平台推荐" class="img-cover br random-img"></span><div class="random-text">
<p class="title">湖南卫视在线直播观看指南-网络直播技巧与平台推荐</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-10-21
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/ty/1022.html" title="浙江卫视节目表,2023年最新播出安排-观众指南"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/f1dc74eaec0541bc67272cc216d826ae-120-90-1.png" alt="浙江卫视节目表,2023年最新播出安排-观众指南" class="img-cover br random-img"></span><div class="random-text">
<p class="title">浙江卫视节目表,2023年最新播出安排-观众指南</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-10-21
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/ty/1056.html" title="新浪NBA体育报道深度解析-专业视角下的赛事追踪"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/08ca39ae65b59c39b70abd776e440d55-120-90-1.png" alt="新浪NBA体育报道深度解析-专业视角下的赛事追踪" class="img-cover br random-img"></span><div class="random-text">
<p class="title">新浪NBA体育报道深度解析-专业视角下的赛事追踪</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-10-21
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li></ul>
</section>
<section id="aside_hot_comment" class="widget widget_aside_hot_comment sb br mb">
<p class="c-title mb"><span class="name">热评文章</span></p>
<ul class="widget-content aside_hot_comment"><li class="list clearfix"><a href="https://www.fsgp.cn/p/baike/65536.html" title="Adobe正版软件服务崩溃_AGS弹窗报错或无法验证许可证怎么办【禁用】"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/5e5c3e49e067d55b4723a7a2ef013bbf-120-90-1.jpg" alt="Adobe正版软件服务崩溃_AGS弹窗报错或无法验证许可证怎么办【禁用】" class="img-cover br random-img"></span><div class="new-text">
<p class="title">Adobe正版软件服务崩溃_AGS弹窗报错或无法验证</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-12-16
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/yl/256.html" title="揭秘欧倩怡：才华与美貌并重的艺人风采"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/88a70e273939466b22e9d579e6458c56-120-90-1.jpeg" alt="揭秘欧倩怡：才华与美貌并重的艺人风采" class="img-cover br random-img"></span><div class="new-text">
<p class="title">揭秘欧倩怡：才华与美貌并重的艺人风采</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-10-20
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/baike/65792.html" title="如何保证html语义化_编写语义化HTML代码规范指南【规范】"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/c310cf8cf4311549dd9e4b6bc500d9ed-120-90-1.png" alt="如何保证html语义化_编写语义化HTML代码规范指南【规范】" class="img-cover br random-img"></span><div class="new-text">
<p class="title">如何保证html语义化_编写语义化HTML代码规范指</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-12-16
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/yl/512.html" title="揭秘孟茜：全方位了解这位才华横溢的女星个人资料"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/b754b7b73665fcb46b2fa901460124a2-120-90-1.png" alt="揭秘孟茜：全方位了解这位才华横溢的女星个人资料" class="img-cover br random-img"></span><div class="new-text">
<p class="title">揭秘孟茜：全方位了解这位才华横溢的女星个人资料</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-10-21
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/baike/66048.html" title="Win11无法安装打印机0x00000709 Win11替换系统文件修复打印机连接错误"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/71ab34de5ec7bf50806902276fb17511-120-90-1.jpg" alt="Win11无法安装打印机0x00000709 Win11替换系统文件修复打印机连接错误" class="img-cover br random-img"></span><div class="new-text">
<p class="title">Win11无法安装打印机0x00000709 Win</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-12-16
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li><li class="list clearfix"><a href="https://www.fsgp.cn/p/ty/768.html" title="jrs直播无插件直播NBA,畅享篮球赛事-观看指南"><span class="img-wrap br"><img src="https://www.fsgp.cn/zb_users/cache/thumbs/0cc154d4fd581170ba9b64ec634bddb8-120-90-1.png" alt="jrs直播无插件直播NBA,畅享篮球赛事-观看指南" class="img-cover br random-img"></span><div class="new-text">
<p class="title">jrs直播无插件直播NBA,畅享篮球赛事-观看指南</p>
<div class="info">
<span class="time">
<i class="iconfont-air icon-time"></i>
2025-10-21
</span>
<span class="comment">
<i class="iconfont-air icon-comment"></i>
0
</span>
</div>
</div></a></li></ul>
</section>
<section id="divComments" class="widget widget_comments sb br mb">
<p class="c-title mb"><span class="name">最新留言</span></p>
<ul class="widget-content divComments"></ul>
</section> </div>
</aside>
</div>
<footer class="footer">
<div class="main container">
<div class="f-about fl">
<p class="title pb1">关于本站</p>
<div class="intro"></div>
<small><span>Copyright © 2025 </span><span class="icp"><a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">川ICP备6666666号</a></span></small>
</div>
<div class="f-contact fl">
<p class="title pb1">联系我们</p>
<div></div>
</div>
<div class="f-qr fr">
<p class="title pb1">关注我们</p>
<div><img class="img br" alt="佛山资讯网二维码" src="https://www.fsgp.cn/zb_users/theme/suiranx_air/image/qr_default.jpg"/></div>
</div>
<div class="clear"></div>
</div>
<div id="toolbar" class="toolbar ">
<div id="totop" class="btn hidden sb br">
<i class="iconfont-air icon-top"></i>
</div>
</div>
</footer>
<script>
//移动端点击btn回弹色值
document.getElementById('totop').addEventListener('click', function() {
this.style.backgroundColor = '#0084ff';
this.querySelector('.iconfont-air').style.color = 'white';
setTimeout(() => {
this.style.backgroundColor = 'white';
this.querySelector('.iconfont-air').style.color = '#333';
}, 500);
});
</script>
<!--黑色透明遮罩-->
<div id="mask-hidden" class="mask-hidden transition"></div>
<!--初始化Swiper-->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
centeredSlides: true,
autoplay: 3500,
slidesPerView: 1,
paginationClickable: true,
autoplayDisableOnInteraction: false,
spaceBetween: 0,
loop: true
});
</script>
<!--分页-->
<!--统计代码-->
</body>
</html><!--444.41 ms , 33 queries , 1230kb memory , 0 error--> 