Wrote a little webapi knowledge points from 0 to 1

1.1-DOM operation

• dom The essence of node operation is actually adding, deleting, modifying and querying ,

Check elements

• When will you use document.querySelector(' Selectors ')

  • Demand determines ： Just get one element

• When will you use document.querySelectorAll(' Selectors ')

  • Demand determines ： You need to get multiple elements

• querySelector and querySelectorAll Differences and precautions

  • difference ：

    • querySelector : obtain null|dom object , You can use it directly dom grammar
    • querySelectorAll : Get pseudo array , You can't use it directly dom grammar （ Prototype chain is different ）

  • matters needing attention ：

    • Pseudo arrays must be extracted by subscript dom object , Can be used dom grammar

• Did you notice ,querySelector The parameter of is a Selector string ,id Selectors and id name , Class selectors And Class name The difference between For example, there is a box

<div class="box"></div>

• The name of the class is ： box

• The class selector is ： .box

• Actually ,querySelector The search element is queried through a selector （ It's equivalent to finding a person through his ID card ）,dom There is another way to query elements through node relationships .（ Equivalent to I want to find your father , I'll know who your father is when I find you first ）,

  • Get all the child elements of an element ：  Elements .children
  • Get the parent element of an element ：  Elements .parentNode
  • Get the previous element of an element ( brother ):  Elements .previousElementSibling
  • Get the next element of an element ( Younger brother ): Elements .nextElementSibling

check ： Check the properties

• You can tell the difference between element attributes and element style attributes ？（ From the perspective of concept and grammar , You can also give examples to deepen your impression ）

  • Concept ：

    • Element attributes ： html Attributes of the tag itself . for example src、href、title、alt
    • Style attribute ： css attribute

  • grammar ：

    • Element attributes ：  Elements . Property name
    • Style attribute ：  Elements .style. Property name

• innerText and innerHTML The difference between

  • innerText : Get text
  • innerHTML : Get text + label

• stay dom In the syntax , Form elements have some attributes that are different from ordinary elements , It is called the unique attribute of form element

  • value : Get the value of the form
  • disabled : Whether to disable
  • checked、selected： Is it checked?

Change properties

• stay dom In the syntax , When we want to modify the element style . There are many ways , Some grammars are used to modify a style , Some grammars are used to modify multiple styles .

  • When I want to modify a style, I use ：

    • Elements .style. Style name = Style value
    • Be careful ： Weights are intra line weights

  • Use when I want to modify multiple styles ：

    • Elements .classList.add()/remove()/toggle()/contains()

      • Be careful ： Weight is the weight of class name

• dom The attributes of elements are divided into standard attributes and custom attributes . The principle of their distinction is ： Standard attributes indicate HTML And CSS Native properties . Custom properties ： We add attributes ourselves like objects , These attributes are mainly used to store data . For example, a delete order button , We only need to store the corresponding order number in this button . So when you click the delete button , You will know which order the user wants to delete .（ I said so much , The point is ： Custom attributes are used to store data ）

  • Elements .getAttribute(' Property name ')
  • Elements .setAttribute(' Property name ', Property value )
  • Elements .removeAttribute(' Property name ')

Add elements

• dom Syntax is used to create elements for pages

  • document.createElement(' Tag name ')

    • Create an empty tag in memory

  • Set contents

  • Add to dom Trees

• dom The following two kinds of syntax are used to add elements to the page （ Create and add have different meanings . Creating refers to creating in memory , Adding refers to adding this element to dom Trees , Only after adding , Only then can we see the element rendering on the page ）

  • Elements .appendChild()
  • Elements .insertBefore()

Remove elements

• dom Syntax for deleting elements in

  • Parent element .removeChild( Subelement )

1.2- event

• Event is js A mechanism for handling user interaction , An event must consist of three elements

  • Event source ： dom Elements
  • Event type ： Interaction opportunity
  • Event handler

• The event handler function will not be executed during registration , It will be executed in the following two cases

  • （1） When the user triggers an event
  • （2） Actively call the event handler

• Common events and the timing of their execution

  • Mouse events

    • Mouse click onclick

    • Mouse click obdblclick

    • Mouse migration / Removed from the

      • onmouseover/onmouseout : Support bubbling
      • onmouseenter/onmouseleave： Blistering is not supported

    • Mouse movement onmousemove

    • The mouse click onmousedown

    • Release the mouse onmouseup

  • Keyboard events

    • oninput : Keyboard entry
    • onkeydwon : Press the keyboard
    • onfocus: Be a focus
    • obblur: Lose focus

  • Page Events

    • onscroll ： Page scrolling
    • onresize： Page size changes

• The principle of event delegation （ High frequency interview questions ）

  • What is event delegation

    • Event delegation is to register events for parent elements , Delegate child element processing

  • What is the principle of event delegation

    • Event Bubbling

  • What problems can event delegation solve

    • (1) Dynamically add new elements
    • (2) All child elements need to register events with the same name , Register the parent element

  • In development , When will we use event delegation

    • Dynamically add

• There are three stages of event flow

  • Event capture
  • The objective of the event
  • Event Bubbling

• Common properties or methods of event objects

  • e.preventDefault() : prevent a and form Default jump
  • e.target : The trigger source in the event delegate
  • e.stopPrapagation() : Stop the flow of events （ Bubbling + Capture ）
  • e.key / e.keyCode : Get the key

1.3-bom

• localStorage And sessionStorage difference （ Interview must ask some ）

  • localStorage : Hard disk storage
  • sessionStorage ： Memory storage

• The time delay function setTimeout And the intermittent function setInterval The difference between （ They are collectively called timers ）

  • setTimeout ： Only once , Automatic removal of
  • setInterval ： Permanent repetition , It needs to be cleared manually