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)


相关推荐

  • 什么是多模态机器学习?「建议收藏」

    什么是多模态机器学习?「建议收藏」首先,什么叫做模态(Modality)呢?每一种信息的来源或者形式,都可以称为一种模态。例如,人有触觉,听觉,视觉,嗅觉;信息的媒介,有语音、视频、文字等;多种多样的传感器,如雷达、红外、加速度计等。以上的每一种都可以称为一种模态。同时,模态也可以有非常广泛的定义,比如我们可以把两种不同的语言当做是两种模态,甚至在两种不同情况下采集到的数据集,亦可认为是两种模态。因此,多模态机器学习,英文全…

  • springboot rabbitmq 之死信队列(延迟消费消息)「建议收藏」

    springboot rabbitmq 之死信队列(延迟消费消息)

  • Java静态变量存储在内存中的什么位置?「建议收藏」

    Java静态变量存储在内存中的什么位置?「建议收藏」静态成员变量存储在堆的永久生成区域中。这是因为static不属于对象而是属于类,所以它被认为是类定义的一部分。如果静态变量是基元类型,它们将存储在permGen中。如果静态变量是一个引用变量,例如staticPersonobj=newPerson(),那么reference变量obj将被存储在permGen中,新创建的objected将被放置在年轻一代中。…

  • A*算法之八数码问题 python解法

    A*算法之八数码问题python解法文章目录A*算法之八数码问题python解法问题描述A*算法与八数码问题状态空间的定义各种操作的定义启发式函数的定义人工智能课程中学习了A*算法,在耗费几小时完成了八数码问题和野人传教士问题之后,决定写此文章来记录一下,避免忘记问题描述在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字。棋盘中留有一个空格,空格用0来表示。空格周围的棋子可以移到空格中。要求解的问题是:给出一种初始布局(初始状态)和目标布局(为了使题目简单,设目标状态为12380

  • Mybatis分页插件使用的详解[通俗易懂]

    Mybatis分页插件使用的详解[通俗易懂]前言关于分页,一般来说rowBounds这种假分页都上不了台面,我们往往都选哟真分页,那么还不想搞得很麻烦,Mybatis的分页插件就为后端程序员解决了这个问题例子首先需要导入依赖,没错pagehelper<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><v

  • 数据结构之图的基本概念建议收藏

    一图的定义定义:图(Graph)是由顶点的有穷非空集合和顶点之间边的集合组成,通常表示为:G(V,E),其中,G表示一个图,V是图G中顶点的集合,E是图G中边的集合。在图中需要注意的是:(1)

    2021年12月19日

发表回复

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

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