JavaScript complete summary of timer & DOM document

In the process of learning JavaScript, you will encounter many problems such as timers and dom. This article will explain the related problems in detail.

In JavaScript, there are two types of timers, one is setTimeout(), and the other is setTimeout()

setTimeout()

The setTimeout function is used to specify How many milliseconds after a certain function or piece of code will be executed. It returns an integer representing the timer number, which can be used to cancel the timer later.
var timerId = setTimeout(func|code, delay)

In the above code, the setTimeout function accepts two parameters. The first parameter func|code is the name of the function or a piece of code that will be postponed. The second parameter delay is the number of milliseconds to delay execution.

It should be noted that the code to postpone execution must be put into setTimeout in the form of a string, because the engine uses the eval function internally to convert the string into code.
If the postponed execution is a function, you can directly put the function name into setTimeout. On the one hand, the eval function has security concerns, and on the other hand, in order to facilitate the JavaScript engine to optimize the code, the setTimeout method usually takes the form of a function name, as shown below.

function f(){  console.log(2);}setTimeout(f,1000);// 或者setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
clearTimeout()，clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();```

After running the above code, any setTimeout actually set is invalid.
The operating mechanism of setTimeout and setInterval is: 1. Move the specified code out of this execution, wait until the next round of Event Loop, and then check whether the specified time has arrived. 2. If it arrives, execute the corresponding code; if it does not arrive, wait until the next round of Event Loop to re-judge.

This means that the code specified by setTimeout will not be executed until all the codes executed this time have been executed.

The function of setTimeout is to postpone the execution of the code until the specified time. If the specified time is 0, that is, setTimeout(f,0), then it will not be executed immediately.

setTimeout(f,0) will The second parameter is set to 0, which causes f to be executed as soon as the existing tasks (script synchronization tasks and existing events in the "task queue") end. In other words, the function of setTimeout(f,0) is to execute the specified task as early as possible. #DOM>Before, I was basically talking about the syntax of js, but now I combine html and js.
The Document Object Model (DOM) is the programming interface for HTML and XML documents. It provides a structured representation of the document (structure tree) and defines a way that programs can access the structure tree to change the structure, style and content of the document.

DOM provides a way to represent a document as a structured group of nodes and objects containing properties and methods. Essentially, it connects a web page to a script or programming language.
 To change something on the page, JavaScript needs to get the HTML document Entrance to access all elements in the . This entry, along with the methods and attributes for adding, moving, changing or removing HTML elements, are all obtained through the DOM ##document object* Each HTML document loaded into the browser will become a document object. The document object contains the basic information of the document. We can access and modify all elements in the HTML page through JavaScript.
#Commonly used attributes of document objects The document object has many attributes to describe document information. Here are a few commonly used ones.
*
#doctype When writing an HTML document, the first sentence is usually a doctype statement, which can be passed through document Obtain the object, if not, return null`document.doctype; // 8b05045a5be5764f313ed5b9168a17e6document.doctype.name; // "html"`*
#head、body`document.head;`
` document.body;`
How to obtain the head of the document through these two properties respectively. The body node
*
#activeElementactiveElement property returns the element that has received focus in the current document.
Users can usually use the tab key to move the focus and the space bar to activate the focus. For example, if the focus is on a link, pressing the space bar will jump to the link

*
#documentURI, domain, lastModifieddocumentURI attributes return the URL of the current document

domain attribute returns the document domain name ###lastModified returns the last modification time of the current document ######* location###location attribute returns a read-only object, Provides the URL information of the current document######

// Assume that the current URL is
http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // " http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"document.location.host // " www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/ path/a.html"document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document .location.password // "passed"
// Jump to another URL
document.location.assign('http://www.google.com')
// Prioritize reassigning from the server Load
document.location.reload(true)
// Prioritize reloading from local cache (default value)
document.location.reload(false)
// Jump to another URL, But the current document is not retained in the history object,
// that is, you cannot use the back button to return to the current document
document.location.assign('http://www.google.com')// change the location The object is converted to a string, which is equivalent to document.location.href
document.location.toString()```

Although the object returned by the location attribute is read-only, the URL can be assigned to With this attribute, the web page will automatically jump to the specified URL.
document.location = 'http://www.example.com';// Equivalent to document.location.href = 'http://www.example.com';

title, characterSet

title property returns the title of the current document, which is writable
characterSet property returns the character set for rendering the current document

readyState

readyState property returns the current There are three possible values ​​for the status of the document
loading: loading HTML code phase, parsing has not yet been completed
interactive: loading external resource phase
complete: all loading completed

#compatMode
The compatMode attribute returns the mode in which the browser processes the document. Possible values ​​are

BackCompat: backward compatibility mode, that is, no DOCTYPE is added

CSS1Compat: strict mode, DOCTYPE is added

#cookie

Cookie is the text stored on the client. It will be introduced in the client storage chapter later.

innerText

innerText is a writable attribute , returns the text content contained in the element. When there are multiple levels, the content will be spliced ​​in order from shallow to deep.

dc6dce4a544fdca2df29d5ac0ea9906b e388a4556c0f65e1904146cc1a846bee 123 45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114 214f6b82cfdd31b57cd8cd6f58845e76

The innerText return content of the outer div is "123456"

innerHTML, outerHTML

The innerHTML attribute has a similar function to innerText, but it does not return the text content of the element. Instead, it returns the HTML structure of the element, and the DOM is automatically constructed when writing

dc6dce4a544fdca2df29d5ac0ea9906b e388a4556c0f65e1904146cc1a846bee 123 45a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68

The innerHTML return content of the outer div is "e388a4556c0f65e1904146cc1a846bee12345a2772a6b6107b401db3c9b82c049c245654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3"

The outerHTML return content also includes itself

#Common methods of document objects

open(), close()

The document.open method is used to create a new document for the write method to write content. It is actually equivalent to clearing the current document and rewriting the content.
The document.close method is used to close the document created by the open method. Once closed, the write method cannot write content.

write()
The document.write method is used to write content to the current document. As long as the current document has not been closed using the close method, the content it writes will be appended to the existing content.

document.open();document.write("hello");document.write("world");document.close();```

1. If the page has been rendered, then When the write method is called, it will first call the open method to erase all the contents of the current document and then write it.

2. If the write method is called during page rendering, the open method will not be called.

It should be noted that although the write method can no longer be used to write content after calling the close method, other DOM nodes of the current page will still continue to load.

##*Except for some special circumstances, you should try to avoid using the document.write method.
This article explains issues related to timers. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:
Detailed explanation of the working principle of AJAX and its advantages and disadvantages

N ways to obtain elements in JS and their Dynamic and static discussion

#############JavaScript complete summary of DOM’s Element#########

The above is the detailed content of JavaScript complete summary of timer & DOM document. For more information, please follow other related articles on the PHP Chinese website!