Secret of anchor

What is anchor?

Previously, I thought:An anchor is an a tag such as href = "# ID" or "# NAME". It is mainly used to quickly locate elements on a page and implement the functions of bookmarks or directories.

Later, I changed my opinion on the anchor to identify the true face of the anchor.

Now I have a new understanding of it:An anchor tag is an <A> tag. You can use the href attribute to link an anchor to another page or a location on the current page..

What we usually call anchor or an anchor is actually an anchor. Although it is different, it is essentially the same as "tomato" and "tomato. There are also a wide variety of interpretations of the anchor or link on the Internet. If there are ambiguous questions, you 'd better go to the official website to find answers, such as MDN or W3C (FQ version, the Chinese version is slow, and not necessarily accurate) find the answer.

The"

TheHtmlAnchorElement(<a>) Defines a hyperlink to a location on the same page or any other page on the web. it can also be used (in an obsolete way) to create an anchor point-a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

I am not good at English, but I can still understand the meaning of this sentence. I will not translate it here, for fear of ugliness.

Each <A> tag on the page creates an anchor object for it. You can also use the document. createelement ("A") to create an anchor object. For details, visitHTML Dom anchor object.

We can get the anchors through the document. Anchors [] array, or use document. getelementbyid () or other methods to get the DOM object.

　　Note: Document. Anchors [] can only obtain the anchors with such attributes. If the anchors do not have the name attribute, they can be accessed through document. getelementbyid.

Hash

This is how MDN describes"HTMLHyperlinkElementUtils.hashProperty returnsDOMStringContaining‘#‘Followed by the fragment identifier of the URL. The fragment is not percent-decoded ."

It generally refers to the segment after URL # (including, this fragment is not compressed (I don't know how to translate the following sentence ........).

Hash is a readable and writable attribute. There are two ways to obtain hash, window. Location. Hash, or window. Location. href, and then intercept it through the first #

Hash can be used for cross-origin. The combination of IFRAME and location. Hash can be used to implement cross-origin Javascript. hashchange can also be used to implement Ajax forward and backward or single-page switchover, such as angular routing.

Onhashchange

MDN is described as follows:

ThehashchangeEvent is fired when the fragment identifier of the URL has changed (the part of the URL that follows the # symbol, including the # symbol ).

The onhashchange event is triggered when the characters after the URL # include.

So how can I change the content after?

There are four main methods:

1. Manually change the hash value of the URL in the address bar of the browser, that is, the part after the URL #

2. Use the code to change the hash value, such as window. Location. href = "url # hash" or window. Location. Hash = "yourhash ".

3. Use an anchor to change the hash value, href = "# Number + id" or href = "# Number + name ".

4. onhashchange may also be triggered through the forward and backward directions provided by the browser, because although there is no page reload for the hash change, the URL after the hash change will be written to the history, for example, if you click an anchor link, the page will scroll to a certain position, and the URL hash value has changed. clicking the back button will trigger hashchange.

Ju Li, uses the hash principle to implement the Ajax forward and backward Functions

We all know that AJAX requests do not generate historical records in the browser. If you want to view the data of the previous request, it is useless to press the back key of the browser. You only need to fill in the query conditions again, then execute the query to obtain the desired result. This is unreasonable in some scenarios. Use hashchange to solve the above problems:

Ajax requests are the data in the search box of 58 local cities. Enter apple-> Search, enter orange-> search, and click back to return to the Apple list page.

The following is an implementation method. If you are interested, try it yourself.

<! Doctype HTML> 
The content of this chapter is complete. Although there are not many contents, it takes a lot of energy. In short, there are still a lot of GAINS.
In fact, I have elaborated on a point in this article that the anchor is more than just positioning.
If you think I am not correct, I hope you can correct me.
Secret of anchor