Js Review (7)

Js native DOM, BOM operation summary

DOM

To obtain

  • GetElementById ()
  • The getElementsByTagName ()
  • GetElementsByClassName ()
  • QuerySelectorAll ()
  • ParentNode,childNodes Parent element,child element

Modifying DOM Attributes

  • p1.style/className/nodeName/nodeName/nodeType

In nodeType, 1 represents a DOM element and 3 represents text

  • Get /setAttribute Sets the attribute

Modifying the DOM structure

  • New: Const p1=documnent.createElement (‘p’)
  • Insert: div.appendChild (p1)
  • Remove: removeChild() removes child elements

Performance optimization

Reduce queries, make storage reduction changes to queries, merge multiple changes into one (for the purpose of the virtual DOM)

Event delegation

By attaching the event to the parent element, you don’t need to bind each child element and get the triggered child element with e.target when it happens

The bubble mechanism is utilized

Prevent bubbling: stopPropagation preventDefault event: preventDefault

Element scroll/move event

ScrollTop through e.target.scrollTop with element attributes to detect common scrolling: lazy loading, top style

  1. offset
  • The outer size of the offsetWidth/offsetHeight element
  • OffsetLeft /offsetTop The distance of the offsetLeft/offsetTop element from the left and top borders of the parent container
  1. clent
  • ClientWidth /clientHeight element content size
  • The border width of the clientLeft/clientTop element

3.scroll

  • ScrollWidth /scrollHeight The scrollable height/width of the element’s content
  • ScrollTop /scrollLeft The scrolling distance of the element

BOM

Identify the browser

The navigator, userAgent

The screen

window.screen

location

The url parameter

window.location

  • Href all
  • Protocol agreement
  • The pathname path
  • The host name
  • The search parameters
  • Hash hash #

history

Forword forward back

ajax

The core API of Ajax: XMLHttpRequest

Handwritten ajax

const  xhr=new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4)
        if(xhr.status===200){
        ...
        }
    }
}
xhr.send()
Copy the code

Status code:

  • Zero: no send
  • 1: sending loading
  • 2: The sending is complete
  • 3: parsing
  • 4: Parsing is complete