HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」

HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」之前为大家介绍了些许关于HTML5新添加的小东东,想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HTML5中有关HTMLDocument方面新添加的内容都有什么呢?HTML5中有关HTMLDocument方面新添加的内容有readyState属性、兼容模式判断和head属性。下面就为大家一一介绍这些新添加的小东东吧。

大家好,又见面了,我是你们的朋友全栈君。

  之前为大家介绍了些许关于HTML5新添加的小东东,想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HTML5中有关HTMLDocument方面新添加的内容都有什么呢?HTML5中有关HTMLDocument方面新添加的内容有readyState属性、兼容模式判断和head属性。下面就为大家一一介绍这些新添加的小东东吧。

  1、readyState属性

  早在IE4时代的时候,document对象就引入了readyState属性了,但是一直都没有纳入标准,如今,在HTML5的时代了,就纳入规范了。readyState属性有两个可能的值:

  (1)loadding,正在加载文档

  (2)complete,已经加载完文档

  如何才能恰当的使用document.readyState呢?document.readyState最恰当的使用方式就是通过它来实现一个指示文档已经加载完成的指示器。在这个属性得到广泛支持之前,要实现这样一个指示器,还是必须需要onload事件处理程序设置一个标签,表明文档已经加载完毕。下例子如下

  HTML代码

<div>梦龙小站</div>
<div class="complete"></div>

  JavaScript代码

<script type="text/javascript">
window.onload = function(){
	var a = 0;
	var b = 0;
	if(document.readyState == "complete"){
		$(".complete").html( "加载好了" )
	}

	if(document.readyState == "loading"){
		$(".load").html( $(".load").html() + "<br/>" + a++ )
	}
};

  预览效果

HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)

  2、兼容模式判断

  IE6之后就开始区分渲染页面的模式了,分为标准的和混杂的,检测页面的兼容模式就成为浏览器的必要功能。IE为此给document添加了一个名为compatMode的属性,这个属性就是为了告诉开发人员浏览器用了哪种渲染模式。就像下面的小例子中所展示的那样,在标准模式下,document.compatMode的值等于”CSS1Compat”,而在混杂模式下,document.compatMode的值等于”BackCompat”。

  JavaScript代码

if(document.compatMode == "CSS1Compat"){
	alert("标准模式")
}else{
	alert("混杂兼容模式")
}

  3、Head属性

  作为对document.body引用文档的body元素的补充,HTML5新增了document.head属性,这样就可以引用head标签了。使用方法如下

  JavaScript代码

var head = document.head || document.getElementsByTagName("head")[0];

  就像上面那样做一下兼容,如果可以用的话,就是用document.head,否则仍然使用getElementsByTagName()方法。document.head属性支持的浏览器有Chrome和safari 5。

  HTML5实战与剖析之HTMLDocument变化(readyState属性、兼容模式和head属性)就为大家介绍到这里,在百忙当中学习一下新的小知识,生活还是很充实的,并把学习的一些小东东和大家分享一下,那简直的神仙般的日子了。HTML5实战与剖析的相关更新,欢迎关注梦龙小站。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161640.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Java获取当前时间/日期/时间戳及格式化总结,附代码

    Java获取当前时间/日期/时间戳及格式化总结,附代码拿来即用舒服了

  • Ubuntu20.04安装中文输入法

    Ubuntu20.04安装中文输入法新装了ubuntu20.04的系统,由于装系统时,选择安装了英文的版本,因此系统没有中文输入法,此时我想加入中文输入法。在设置-语言中怎么改都没有用。最终用下面方法解决了安装中文语言包**由于我装系统时,选择了安装English版本,所以先安装了一下中文语言包。sudoapt-getupdatesudoapt-getinstalllanguage-pack-zh-hans安装输入法sudoaptinstallibus-libpinyinsudoapti

  • 领域驱动实践总结(基本理论总结与分析+架构分析与代码设计V+具体应用设计分析)

    领域驱动实践总结(基本理论总结与分析+架构分析与代码设计V+具体应用设计分析)领域驱动设计DDD是一种设计思想,它可以同时指导中台业务建模和微服务设计(中台本质是业务模型,微服务是业务模型的系统落地),领域驱动设计强调领域模型和微服务设计的一体性,先有领域模型然后才有微服务,而不是脱离领域模型来谈微服务设计。

  • deepfakes视频的网站_惊了,DeepFakes不仅骗过人,还能骗过人脸识别系统?![通俗易懂]

    deepfakes视频的网站_惊了,DeepFakes不仅骗过人,还能骗过人脸识别系统?![通俗易懂]原标题:惊了,DeepFakes不仅骗过人,还能骗过人脸识别系统?!选自arXiv作者:PavelKorshunov、SebastienMarcel机器之心编辑部今年年初,DeepFakes技术火爆全网,它可以轻松替换视频中的人脸。网络上各种恶搞视频(其中大量是色情视频)让人分不清真真假假,那么人脸识别系统能够检测出哪些是DeepFakes生成的视频吗?这项研究告诉我们不太行……自动视…

  • 【超详细】计算机组成原理总结及思维导图[通俗易懂]

    计算机组成第一章计算机系统概论冯诺依曼型计算机特点1.计算机由运算器,控制器,存储器,输入和输出设备5部分组成2.采用存储程序的方式,程序和数据放在同一个存储器中,并以二进制表示。3.指令由操作码和地址码组成4.指令在存储器中按执行顺序存放,由指令计数器(即程序计数器PC)指明要执行的指令所在的储存单元地址,一般按顺序递增,但可按运算结果或外界条件而改变5.机器以运…

  • webstrom激活码2021【注册码】

    webstrom激活码2021【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号