Web front end

The DOM extension

Document

HTML5 extends HTMLDocument and adds new features. Like other DOM extensions added to HTML5, these changes are based on proprietary extensions that are already beautifully supported by many browsers. So although these extensions have been written into the standard for a relatively short time, many browsers have supported them for a long time.

1. The readyState attribute

IE4 was the first to introduce the readyState property for the Document object. Other browsers followed, and eventually HTML5 made it a standard. The Document readyState property has two possible values:

  • Loading, loading a document;

  • Complete, the document has been loaded.

The most appropriate way to use Document.readyState is to implement an indicator indicating that the document has been loaded. Before this property became widely supported, to implement such an indicator, you had to set a tag with the onload event handler indicating that the document had been loaded. The basic usage of the document.readyState property is as follows.

JS

If (document. The readyState = = “complete”) {

// Perform the operation

}

Browsers that support readyState include Internet Explorer 4+, Firefox 3.6+, Safari, Chrome, and Opera 9+.

2. Compatible mode

Since IE6 began to distinguish between standard and hybrid modes of rendering pages, detecting compatibility modes of pages has become an essential feature of browsers. Internet Explorer has added a property called compatMode to document, which tells developers what rendering mode the browser is using. As shown in the example below, in standard mode, document.compatMode is equal to “CSS1Compat”, while in promiscuous mode, document.compatMode is equal to “BackCompat”.

JS

If (document.com patMode = = “CSS1Compat”) {

Alert (” Standards mode “);

} else {

Alert (” Quirks mode “);

}

Since then, Firefox, Safari 3.1+, Opera, and Chrome have implemented this property. Finally, HTML5 included this attribute as a standard, specifying its implementation.

3. Head properties

As a complement to the document.body reference document’s element, HTML5 adds the document.head attribute, which refers to the document’s element. To reference the element of a document, you can use this attribute in combination with another backup method.

JS

Var head = document. Head | | document. The getElementsByTagName (” head “) [0];

If available, use document.head, otherwise use the getElementsByTagName() method.

Browsers that implement the document.head attribute include Chrome and Safari 5.