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";

  • 相关阅读:
    ORACLE 如何产生一个随机数
    Oracle数据库一些操作信息
    EXP-00091和IMP-00010报错
    ORACLE数据库 memory_target SGA 大小
    linux如何查看端口被哪个进程占用的方法
    命令信息
    Linux负载均衡软件LVS
    oracle 字段信息
    oracle数据库的启动与关闭
    idea解除版本控制
  • 原文地址:https://www.cnblogs.com/dekevin/p/4878225.html
Copyright © 2011-2022 走看看