zoukankan      html  css  js  c++  java
  • HTML-获取/修改html页面标题

    作为一个标准的HTML文档,网页标题(title)是必不可少的属性。随着浏览器的发展,我们又多了一种访问和修改文档的方式:DOM。所以我们获取网页标题的方式大致可分为以下两种:

    1. 通过document对象访问title
      var title = document.title;
    2. 通过DOM方式访问title
      var title = document.getElementsByTagName('title')[0];

    但是这两种获取方式是截然不同的,document.title这种方式可以直接获得网页标题的字符串副本,它返回一个字符串;然而通过DOM方式获取的则是HTML文档中的title结点对象。

    • var TOSTRING = Object.prototype.toString;
      alert(TOSTRING.call(document.getElementsByTagName('title')[0]));// output [object Object]
      alert(TOSTRING.call(document.title)); // output [object String]

    我们可以利用结点对象的innerHTML属性输出网页标题:
    document.getElementsByTagName('title')[0].innerHTML;
    修改网页标题
    此处我们讨论IE浏览器在实现时的一个小Bug:我们知道,理论上可以通过DOM修改HTML文档中的任何一个节点,按照这句话,我们当然可以修改HTML文档中的title节点了。但有趣的是,IE浏览器在这个地方实现的比较怪异,具体为:

    • IE中不能通过document.getElementsByTagName('title')[0].innerHTML来修改title节点内部的子节点,任何试图通过DOM修改网页标题的方法在IE下都将会引发“未知的运行时错误”的异常
    • IE视title节点下不存在任何子节点,即其子节点长度为0,即
      document.getElementsByTagName('title')[0].childNodes.length; // output 0
      但是其innerHTML属性却能正确地返回网页的标题内容

    Firefox在此处表现非常完美。不过除FF和IE,其他的浏览器我没有测试过,感兴趣的朋友可以尝试着去试试。(估计都会比IE表现的要好^^)
    有句话说的好,老方法不一定就过时,存在多年的document.title在这时凸显了它的优势,因为这个属性既能获取网页标题也能修改标题,同时HTML文档中的title节点也会同步地更新。所以:

    • document.title = "new title";
      alert(document.getElementsByTagName("title")[0].innerHTML == "new title");// output true

    目前对于IE浏览器而言,唯一修改网页标题的方式就是使用document.title这种古老而不过时的方法。同时,这种方法对于其他浏览器也同样适用。

    结论
    在web开发中,若要处理网页标题的问题,需要注意一下几点:

    • 在现实世界中利用document.title来处理所有关于获取和修改网页标题的需求,以实现跨浏览器
    • 当网页中有定义多个title元素时(当然这是错误的做法,但浏览器并不会报错),无论哪种使用哪种方法获取网页标题,只有按照DOM文档结构或是文档流的顺序查找所遇到的第一个title元素是有效的标题
    • IE错误地认为title节点下无任何子节点,而利用innerHTML属性却可以正确获取文档标题
    • 对于IE浏览器,无法通过DOM方式去修改文档标题,任何试图通过DOM修改网页标题的方法在IE下都将会引发“未知的运行时错误”的异常

    最佳实践
    获取文档标题:var title = document.title;
    修改文档标题:document.title = "new title";

  • 相关阅读:
    May 1 2017 Week 18 Monday
    April 30 2017 Week 18 Sunday
    April 29 2017 Week 17 Saturday
    April 28 2017 Week 17 Friday
    April 27 2017 Week 17 Thursday
    April 26 2017 Week 17 Wednesday
    【2017-07-04】Qt信号与槽深入理解之一:信号与槽的连接方式
    April 25 2017 Week 17 Tuesday
    April 24 2017 Week 17 Monday
    为什么丑陋的UI界面却能创造良好的用户体验?
  • 原文地址:https://www.cnblogs.com/dekevin/p/4878225.html
Copyright © 2011-2022 走看看