Today, I would like to talk about BOM and DOM in JS. Please correct me if I am not good enough. Thank you.

1.BOM

1. The event

An event is an action performed by the user or the browser itself. An event might be a user clicking on something, a mouse moving over a particular element, or pressing a key on a keyboard. An event can also be something that happens in a Web browser, such as a Web page that loads, or a user that scrolls or resizes a window. By using JavaScript, you can listen for specific events to occur and specify events to occur in response to those events.

JavaScript can handle the following types of events: mouse events, keyboard events, and HTML events

1. Common events

• Load: Triggered immediately after a page or image is loaded
• Blur: Elements lose focus
• Focus: The element gets focus
• Click: Click on an object with the mouse
• “Change” : the user changes the content of a domain
• Mouseover: moves the mouseover an element
• Mouseout: The mouse moves away from an element
• Keyup: A key on a keyboard is released
• Keydown: The key of a keyboard is pressed down

2. Event handlers

Functions that respond to an event are called event handlers (or event listeners). The name of the event handler starts with “on”, so the event handler for a Click event is onclick, and there are several ways to specify a handler for an event

2.BOM object method

Here is the main system dialog box:

The browser invokes the system dialog to display messages to the user through the alert(), confirm(), and prompt() methods (which are actually window object methods)

• Message box :alert, often used.

  • The alert() method displays an alert box with a specified message and an OK button.

• Input box :prompt returns the value in the prompt box.

  • The prompt() method is used to display a dialog that prompts the user for input.
  • Parameters (Optional) :
    • First argument: plain text to display in the dialog box.
    • Second argument: the default input text.

• Confirmation box: Confirm, return true/false.

  • The Confirm () method displays a dialog box with a specified message and OK and cancel buttons.

3. BOM object

1.history

The history object is a history object. Contains urls that the user has visited (in a browser window). The history object is part of the Window object and is accessible through the window.history property.

The length property of the history object returns the number of urls in the browser’s history list.

The method of the history object:

1. Back () : loads the previous URL in the history list.
2. Forward () : loads the next URL in the history list. When the page is first accessed, there is no next URL.
3. Go (number | URL) : URL parameter is used to access the URL. The number argument uses the relative position of the URL to be accessed in the list of urls in History. Go (-1), go to the previous page

2.location

The Location object is one of the Window objects that provides information about the document loaded in the current window, as well as some navigation capabilities. It can also be accessed through the window.location property.

• Href: Sets or returns the full URL
• Location object method
  • Reload () : Reloads the current document.
  • Replace () : Replace the current document with a new one.

3.document

2.DOM

DOM: Document Object Model

To achieve dynamic page interaction, BOM operation is far from enough, need to operate HTML is the core. How to manipulate HTM is DOM.

Simply put, DOM provides the ability to programmatically control an HTML interface. The DOM, or document object model, represents a hierarchical tree of nodes, running developers to add, remove, and modify portions of a page. The DOM is at the heart of javascript.

Every HTML Document loaded into the browser becomes a Document object. The Document object allows us to access all elements of an HTML page from within a script. The Document object is part of the Window object and is accessible through the window.document property.

1. The node

2. Obtain the node

There are four ways to get a node:

• GetElementById ()– Gets the element object from the ID attribute value
• GetElementByName ()– Gets an array of element objects from the name attribute value
• GetElementByClass ()– Gets an array of element objects from the class attribute value
• GetElementByTagName ()– Gets an array of element objects by element name/tag name

• The last three get arrays, so you need to evaluate them by array subscripts
• Note that manipulation of dom nodes is not performed until the node is initialized
  • Treatment:
    • Move the script tag to the end of the HTML
    • Use the onload event to process JS and wait for the HTML to finish loading before loading the JS in the onload event

3. Create a node and insert a node