Basic BOM knowledge

BOM

The Browser Object Model (BOM) is the Browser Object Model. It provides objects that interact with the Browser window independently of content. The core Object is window.

A BOM is made up of a series of related objects, each of which provides a number of methods and attributes.

BOM lacks standards. The standardization body for JavaScript syntax is ECMA, the standardization body for DOM is W3C, and BOM was originally part of the Netscape browser standard.

DOM

Document Object Model

• DOM is about thinking of a document as an object
• The top-level object of the DOM is document
• DOM is primarily about manipulating page elements
• DOM is a W3C standard specification

BOM

Browser object Model

• Think of the browser as an object

• The top-level object of the BOM is window

• BOM learns about objects that a browser window interacts with

• BOM is defined by browser vendors on their browsers

• BOM contains the DOM

The Window object is the top-level object of the browser and has a dual role.

1. It is an interface for JS to access the browser window.
2. It is a global object. Variables and functions defined in the global scope become properties and methods of the window object (global variables = properties of the window: “window. The variable name “prints the value of the variable, and the function becomes the window method. You can omit the window when calling. The dialogs you learned earlier belong to window object methods, such as alert() and prompt().

Window Common Events

Window load event onLoad

Normally we would put the JS code after the tag, but when we add window.onload we can put the JS code anywhere.

window .onload = function (){write js code inside} orwindow.addEventListener ("load" , function() {write js code inside});Copy the code

Window. onload is a window (page) loading event that is invoked when the document content (including images, scripts, CSS files, etc.) is fully loaded.

Note:

1. With window.onload, you can write JS code at the top of a page element, because onload waits until the page is fully loaded before executing the handler function.
2. Window. onload The traditional registration event can be written only once. If there are multiple registered events, the last window.onload takes effect.
3. There are no restrictions if you use addEventListener

Window loading event DOMContentLoaded

document.addEventListener("DOMContentLoaded".function () {});
Copy the code

The DOMContentLoaded event is triggered only when the DOM is loaded, excluding stylesheets, images, Flash, etc. Le9 or above is supported

If there are many pictures on the page, it may take a long time from user access to onload trigger, and the interactive effect will not be realized, which will inevitably affect the user experience. In this case, DOMContentLoaded event is appropriate.

So when you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page, you load the page

Resize window events

window.onresize = function () {};
window.addEventListener("resize".function () {});
Copy the code

Window. onresize is a handler that adjusts the window size to load the event and is called when triggered.

Note:

1. This event is triggered whenever the window size changes by pixels.
2. We often use this event for reactive layout. Use window.innerWidth to get the current screen width

The timer

1. SetTimeOut (callback function, countdown): Call the function when the countdown is over

   Syntax: window.settimeout (callback function, delay time);

• “Window” can be omitted when called
• The delay is in milliseconds but can be omitted, if omitted the default is 0
• There may be many timers on a page, and we often give the timers identifiers (names)

ClearTimeout (timer name) : Clears the setTimeOut timer.

2. SetInterval: The interval at which the callback function is executed

ClearInterval (timer name) : Clears the setInterval timer.

this

This refers to whoever calls this function/method

JS execution queue

One of the hallmarks of the JavaScript language is single-threaded, which means you can only do one thing at a time. This is because Javascript, as a scripting language, was created for the very purpose of handling user interactions in pages and manipulating the DOM

For example, adding and deleting DOM elements cannot be done at the same time. It should be added before it is removed.

Single threading means that all tasks need to be queued until the first one is finished before the next one can be executed. The problem with this is that if JS execution takes too long, the rendering of the page will be incoherent, causing the page rendering load to feel blocked.

To solve this problem, using the computing power of multi-core CPUS, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads. Thus, synchronous and asynchronous appear in JS.

synchronous

The execution of a task after the completion of the previous task, the order of the execution of the program and the order of the task is consistent, synchronous. For example, the simultaneous method of cooking: we boil the water to cook the rice, wait for the water to boil (10 minutes later), then cut the vegetables and fry the vegetables.

asynchronous

When you’re doing one thing, because it’s going to take a long time, you can do something else while you’re doing it. For example, the asynchronous way of cooking, we boil water at the same time, use the 10 minutes, to cut vegetables, stir-fry vegetables.

The essential difference is that each process on this pipeline is executed in a different order.

JS execution mechanism

1. The synchronization task in the stack is performed first.
2. Asynchronous tasks (callback functions) are placed in the task queue.
3. Once all synchronous tasks in the execution stack are completed, the system reads asynchronous tasks in the task queue in sequence. Then the asynchronous tasks that are read end the waiting state, enter the execution stack, and start to execute.

Location object

The Window object gives us a location property that gets or sets the FORM’s URL and can be used to parse the URL. Because this property returns an object, we will also call this property a Location object.

URL

Uniform Resource Locator (URL) is the address of a standard Resource on the Internet. Every file on the Internet has a unique URL that contains information indicating where the file is and what the browser should do with it.

The general syntax of a URL is

Location object properties

Location object method

navigator

The Navigator object contains information about the browser and has a number of properties, the most common being the userAgent, which returns the value of the User-Agent header of the server sent by the client.

The following front-end code can determine which terminal users open the page, to achieve the jump

The history object

The element offset is offset

Description of offset: offset is translated as offset. We can dynamically obtain the position (offset) and size of the element by using offset series related attributes.

• Gets the element distance with the location of the parent element

• Get the size (width and height) of the element itself

• Note: The values returned do not have units

  Offset series common attributes

Offset is different from style

Offset:

• Offset can get the style value in any stylesheet
• The values obtained by the offset series are ununitless
• OffsetWidth contain padding + + width, border
• Properties such as offsetWidth are read-only and can only be obtained but cannot be assigned

So, we want to get the size of the element, offset is more appropriate

Style:

• Style can only get style values from inline style sheets
• Style.width returns a string with units
• Style.width gets a value that does not contain the padding and border
• Style. width is a read-write property that can be obtained or assigned

So, if we want to change the value of an element, we need to change the style

Element viewable client family

Client translates as client, and we use the client family of attributes to get information about the visual area of an element. Through the client series of related attributes can dynamically get the size of the element border, element size, etc.

Execute function immediately

1. Immediate function: a function that can execute itself immediately without needing to be called otherwise.

2. Writing:

/ / 1
(function[function name](parameter1The parameter2) {function body; }) (argument1That argument2);
/ / 2
(function[function name](parameter1The parameter2) {}) (argument1That argument2);
Copy the code

3. The best use of an immediate function is to create a separate scope in which all variables are local and there is no naming conflict

Scroll properties of the element

ScrollTop is used for elements in the box, and the page’s rolled out header is pageYOffset

OffsetWidth clientWidth scrollWidth comparisonThey are mainly used as follows

1. The offset family is often used to get the element position offsetLeft offsetTop
2. Client is often used to get the element size clientWidth clientHeight
3. Scroll is often used to obtain the scrolling distance scrollTop scrollLeft

The difference between mouseEnter and mouseover

The mouseEnter event is triggered when the mouse moves over an element. The difference is similar to a mouseover:

Mouseover is triggered when the mouse moves over its own box or over a child box. The mouseEnter is only triggered by its own box. The reason for this is that the mouseEnter does not bubble

How animation works

Core principle: Continuously move the box position through timer setInterval().

Implementation steps:

1. Gets the current position of the box
2. Add one movement distance to the current position of the box
3. Repeat this with a timer
4. Add an end timer condition
5. Note that this element needs to be positioned to use element.style.left

Principle of slow animation effect

A slow animation is an element that moves at a different speed, most commonly to a slow halt

Ideas:

1. Let the box move a smaller distance each time, the speed will slow down.
2. Core algorithm: (target value – current position)/ 10 as each move distance step 3. Stop the condition is: let the current box position equal to the target position to stop the timer