DOM day_ 04 (7.12) BOM, open new page (delayed opening), address bar operation, browser information reading, historical operation

review

1. Bubbling mechanism

（1） When an event occurs on a child element , Can pass its parent element

（2） Event delegation :

• Help child elements complete events through parent elements
• Suitable for the scene : Dynamically added child elements

（3） Event parameters

• target: This property stores the Party element
• stopPropagation: Stop bubbling

2. Block default events : In the event parameter preventDefault. Mainly used for hyperlinks

3. Event parameters of mouse click , Several sets of coordinate values

• screenX, screenY: Relative to the upper left corner of the screen
• x, y: Relative to the upper left corner of the browser content area
• offsetX, offsetY : Compared with the upper left corner of the event element where the click event occurs

4. Page scrolling Events : onscroll

• Read offset : document.documentElement.scrollTop || document.body.scrollTop

5. Old version operation of property

• getAttribute: Get the value of a property
• setAttribute: Set the value of a property

6.JS Way to create DOM Elements

（1） The ultimate performance : Give up using HTML Code to write , Direct use JS Code

document.createElement( Tag name )

（2） Document fragment : Improve Traverse creation DOM Performance consumption of element

Generate the traversal DOM The elements of are first placed in the fragment , Finally, put the fragment on the page

7.DOM Encapsulation ( Elective )

• Use function encapsulation skills , Put the original DOM simplified .
• document.querySelectorAll -> $
• More prototype methods are provided , Automatic traversal
• This idea is jQuery The idea of encapsulation

• • This idea is jQuery The idea of encapsulation

DOM The routine is just two points :

• First find the element to operate

  • Multiple elements , You need to traverse

• Properties of the operation element

One 、BOM

Browser Object Model: Browser object model

• Used to operate various properties on the browser

  Two 、 Open a new page

  3、 ... and 、 Address bar operation

 

  Four 、 Browser information reading

  5、 ... and 、 Historical operation