Before we talked about all the basic JS syntax, today we will talk about Web API

1. JS basic knowledge, specified grammar (ECMA262 standard)

2. JS Web API, Web operation API (W3C standard)

directory

  1. DOM
  2. BOM
  3. event
  4. AJAX
  5. storage

DOM manipulation (Document Object ModeI)

The Vue React framework encapsulates DOM operations, but DOM operations have always been a prerequisite for front-end engineers. Programmers who only know the framework will not last long

1. The subject

  • What kind of data structure is DOM
  • Common apis for DOM manipulation
  • attrandpropertyThe difference between
  • Insert multiple DOM nodes at once for performance reasons

2. Knowledge

  • Nature of the DOM
  • DOM node operation
  • DOM structure manipulation
  • DOM performance

<1> DOM nature: A tree (XML or HTML interpreted as a tree). XML can be customized, while HTML is a tree that can only use specified tags

<2> DOM node operation

How to obtain nodes: Document. GetElementById (‘ div1) document. The getElementByTagName (‘ div ‘) / / div collection of the document. The getElementByClassName (‘ XXX ‘) / / the class called XXX collection document. The querySelectorAll (‘ p ‘) / / after the set of all p tags get to node, can change the attributes of nodes

The property form is changed to modify JS variables and does not affect the real tag

Attribute type ** Attribute, which modifies the content of the tag directly attached to the tag

Property is changed by obtaining all the attributes of a node in JS and modifying them, while arrtibute directly changes the value of the node.

<3> DOM structure operation (add, delete, change and check)

< 4 > DOM performance

  • DOM manipulation is expensive, so avoid frequent DOM manipulation
  • Cache DOM queries
  • Multiple operations are combined into one operation

Take the following example:

BOM translated into a browser object model (rare, but you can’t miss it)

<1> How do I identify the type of browser

navigator srceen location history

<2> Parse the parts of the URL

< 3 >navigator 和 screenUA detection scheme for each browser

< 4 >location 和 historythroughlocationThe various apis get the various parts of the URL

3. Event binding

Often take an examination of the topic

knowledge











Determine the mode first, whether it is normal event binding or proxy binding

Element. Matches ()

If the element is selected by the specified selector string,Element.matches()Method returns true; Otherwise return false.

Event brokers are generated based on event bubbling

Four, AJAX

<1> XMLHttpRequest



False indicates that the request should be asynchronous, and xhr.status is the HTTP status code

< 2 > status code

< 3 > across domains

<4> Often test questions

Write a simple AJAX by hand

<5> Several Ajax tools

The jQuery ajax; Fetch the API; axios

V. Storage (Need to know)

< 1 > topics

Cookies can only store 4KB and are sent to clients