This is the 23rd day of my participation in the August More Text Challenge

Today we’ll talk about HTMLDocument extensions and custom data attributes

HTMLDocument extension

The HTML5 standard extends the HTMLDocument type and adds some features. Here we briefly introduce three commonly used features.

ReadyState attribute

The readyState property has two values:

Loading: indicates that a document is being loaded.

Complete: indicates that the document is loaded successfully.

    if(document.readyState == 'loading') {console.log('hi Jackson') //hi jackson
    }
Copy the code

This can be useful in real development as an indicator of whether the current document is loaded, and if so what to do.

CompatMode properties

This property indicates what render mode the browser is currently in, which can be standard or promiscuous.

Document.com The value of pateMode is CSS1Compat which is the standard mode

Document.com The value of pateMode is BackCompat, which means promiscuous mode

We can also do this with a branching if judgment.

The head properties

HTMl5 adds the document.head attribute, which points to the head element of a document and can be accessed directly.

    let head = document.head;
    console.log(head); //... 
Copy the code

Character set attributes

Just to say a little bit about this, document added the characterSet property to get the language in which we parse our characterSet.

    console.log(document.characterSet);// UTF-8
Copy the code

Custom data attributes

When we write a small program, such as write a click event, through the click to determine what the click content is, you can use data-xxx = {{XXX}} to operate, this method comes from here, custom attributes to name no restrictions, data- after the content is whatever.

We can retrieve the value using the dataset property. Let me write it down here

 <p id="username" data-name="jackson"> I'm Jackson < / p >const name = document.querySelector('#username');
    console.log(name.dataset);
Copy the code

So you get the value directly, very simple. Custom data attributes are great for scenarios where you need to attach some data to an element. Really very useful, especially in the click after the jump page to send the current click ID.

scrollIntoVIew()

Before we talked about Windows, look at the BOM core – window object (juejin. Cn). One problem that wasn’t covered by the DOM specification was how to scroll an area of a page, and that’s what scrollIntoView does.

The scrollIntoVIew() method takes two arguments

AlignToTop It is a Boolean value

True: scroll window is aligned with the top viewport false: scroll window is aligned with the bottom viewportCopy the code

ScrollIntoViewOptions an option object

  1. Behavior defines the transition animation, which can be smooth or auto
  2. Block defines vertical alignment with four values start Center end nearest
  3. Inline defines horizontal alignment, as with the four values above.

Without taking an argument, this is equivalent to alignToTop equals true

This method can be used to set the page to automatically scroll to a certain place, much like our anchor tool, but it is a scroll, can give users a better experience.