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
- 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
- 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