JavaScript (2) -- a detailed introduction to BOM and DOM

01 First knowledge of JavaScript

Reference: https://blog.csdn.net/qq877507054/article/details/51395830?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168015714516800211596632%2522%252C%2522 scm %2522%253A%252220140713.130102334.pc%255Fall .%2522%257D&request_id=168015714516800211596632&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2 all first_rank_ecpm_v1~hot_rank-1-51395830-null-null.142 v77 _{insert_down38,201} v4 ^add_ask , ²³⁹ v2 ^{insert_chatgpt} &utm_term=bom%E5% 92%8Cdom%E7%9A%84%E5%8C%BA%E5%88%AB%E4%B8%8E%E8%81%94%E7%B3%BB&spm=1018.2226.3001.4187

1.1 Javascript composition

The implementation of JavaScript consists of the following three parts:

composition	describe
ECMAScript (Core)	Describes the syntax and basic objects of JS.
Document Object Model (DOM)	Methods and interfaces for processing web content
Browser Object Model (BOM)	Methods and interfaces for interacting with the browser

Replenish:

1. ECMAScript is a standard, JS is just an implementation of it
2. DOM is a W3C standard; [commonly followed by all browsers]
3. BOM is the implementation of each browser manufacturer on their respective browsers according to the DOM;
4. window is a BOM object, not a js object; javacsript accesses, controls, and modifies the client (browser) by accessing the BOM (Browser Object Model) object

1.2 BOM, DOM concept:

• API(Application Programming Interface, Application Programming Interface) is a set of predefined functions used to provide applications and developers with the ability to access a set of routines based on a piece of software or hardware without having to access the source code, or understand the inner workings Mechanism details.

Both DOM and BOM belong to API.

• BOM(Browser Object Model, browser object model) refers to a set of objects provided by the browser, allowing JavaScript to access and operate the functions and information of the browser. For example, the window object is part of the BOM that represents the browser window and provides methods such as alert()and .setTimeout()

• DOM(Document Object Model, Document Object Model) is a cross-platform andlanguage independentThe interface to XML is a tree-based API that allows programs and scripts to dynamically access and update the content, structure, and style of documents. In a web browser, the DOM is usually represented as a structured representation of an HTML or XML document.

Think of HTML as an object tree (DOM tree), itself and everything in it such as <div></div>these tags are regarded as an object, and each object is called a node (node), which can be understood as the parent class of all Objects in DOM .

• JavaScript is a scripting language that can manipulate browsers and documents using BOM and DOM. For example, use JavaScript to change the content of elements on a page through the DOM API, or use the BOM API to control the size of the browser window.

1. Document tree (DOM tree)
When a browser downloads a web page, usually HTML, this HTML is called document(of course, this is also a node in the DOM tree), and document is usually the root node of the entire DOM tree. This document contains properties such as title （document.title), URL（document.URL）etc., which can be accessed directly in JS.

NOTE: In a browser window there may bemanydocument, for example, pages iframeloaded , each of which is a document.
Those who don't understand iframecan learn from the html5 article I wrote to understand the overall concept of html.

2. BOM is an interface that appears to control the behavior of the browser.

  For example, jumping to another page, forward, backward, etc., the program may also need to obtain parameters such as the size of the screen.
  Since the window of the BOM contains the document, the document property of the window object can be used directly, and the content and structure of the XHTML document can be accessed, retrieved, and modified through the document property. Because the document object is the root node of the DOM (Document Object Model) model. It can be said,BOM contains DOM (object), the browser provides access to the BOM object, and then accesses the DOM object from the BOM object, so that js can operate the browser and the document read by the browser.

The core of BOM is Window, and the Window object has a dual role. It is not only an interface to access the browser window through js, but also a Global (global) object. This means that any object, variable and function defined in the web page has window as its global object.

• WindowObject contains properties: document, location, navigator, screen, history,frames

• DocumentThe root node contains child nodes: forms, location, anchors, images,links

Supplement:
1. If the document contains frames (frame or iframe tags), the browser will create a window object for the HTML document, and create an additional window object for each frame.
2. window.frames returns all named frames in the window
3. Two timers: setTimeout(code,latency)andsetInterval(code,period)

Note: setTimeout only executes the code once. If you want to call it multiple times, you can let the code itself call setTimeout() again; setInteval() will call the code continuously until clearInterval() is called.

02 BOM

2.1 BOM object

BOM (Browser Object Model) refers to the Browser Object Model, which gives JavaScript the ability to "talk" to the browser. The BOM is composed of multiple objects, among which the window object representing the browser window is the JavaScript top-level object, and other BOM objects are sub-objects of the window object.

The BOM provides a number of objects for accessing browser functionality. For example:

• window Object: Represents the browser window, which can be used to obtain the size of the window, open a new window, set a timer, etc.
• location Object: Represents the URL of the current document, which can be used to get or set various parts of the URL.
• navigatorObject: Represents the browser itself, which can be used to obtain browser information, such as name, version number, etc.
• historyObject: Represents the history of the browser, which can be used to go back or forward to a specified page.
• screenObject: Represents the user's screen, which can be used to obtain the size, color depth, etc. of the screen.

2.2 Objects and operations (reproduced mind map)

03 DOM

3.1HTML DOM node

(1) In DOM, the hierarchical structure of HTML documents is represented as a tree structure. The document is represented by a document object, and each child node of the tree represents a different content in the HTML document. Every HTML document loaded into the browser becomes a Document object.

(2) Document is the entrance to explore DOM, and the Document object can be accessed by using the global variable document.
(3) In HTML DOM (Document Object Model), each part is a node:

1. The document itself is a document node
2. All HTML elements are element nodes
3. All HTML attributes are attribute nodes
4. Text inside an HTML element is a text node
5. Annotation is a comment node

There are different types of DOM nodes, each with its own properties and methods. Below is a table listing some common DOM node types and their properties:

node name	Attributes
element node	nodeName、nodeValue、attributes、childNodes 等
attribute node	nodeName、nodeValue 等
text node	nodeName、nodeValue、data etc
comment node	nodeName、nodeValue、data etc
document node	nodeName、doctype、documentElement 等

3.2 Element object

• In the HTML DOM, Elementobjects represent HTML elements.
• Element objects can have child nodes of type element nodes, text nodes, and comment nodes.
• NodeListThe object represents a list of nodes, such as a collection of child nodes of an HTML element.
• Elements can also have attributes. Attributes are attribute nodes.

3.2.1 Get element node

Get element node: documentGet it through three methods of the object:

1. document.getElementById(“ID”)
2. document.getElementByName(“name”)
3. document.getElementsByTagName(“p”);

3.2.2 Element event monitoring

In JavaScript, you can use addEventListener()the method to listen to events. This method accepts three parameters:event type、listenerand aoptional configuration object。

parameter	illustrate
type	A case-sensitive string for the event type.
listener	When the monitored event type is triggered, an event notification (an object implementing the Event interface) object will be received. listener must be an object implementing the EventListener interface, or a function.
options	An optional configuration object, including attributes such as capture, once, passive, and signal.

For example, the addEventListener() method can be used like this:

element.addEventListener('click', function(event) {
    
    
    // 处理点击事件
}, {
    
    capture: false, once: true});

Explanation: The above code adds a click event listener to the element element. When the click event is triggered, the callback function will be executed. The capture specified in the configuration object is false, indicating that the listener is triggered during the bubbling phase; once is true, indicating that the listener will only be triggered once at most.

3.3 Property Node

Get attribute nodes: attribute nodes are attached to element nodes.

• getAttributeNode(attrName)The attribute node can be obtained through the method of the element node
• The attribute value can getAttribute(attrName)be obtained directly.
• For other additions, deletions, and modifications, refer to the official documentation.

3.4 Text nodes

Get the text node: the text node is the child node of the element node.

• Obtained through the method provided by the element node (Element interface) childnodes()[index] .

3.5 Confusion and Supplements

Point of confusion:

<p id="example" title="texts">
  这是一段文本
  <span></span>
</p>

var p = document.getElementById('example');

p.nodeValue //null,p是元素节点，所以nodeValue为null

p.getAttributeNode('id').nodeValue  //example，这里获取到p的id属性的属性节点，nodeValue就是它的属性值

p.childNodes[0].nodeValue   
/*这是一段文本,p是含有两个子节点的，插入的文本虽然没有标签，但它依然是一个节点。
其类型是是文本节点，其nodeValue是就是写入在其中的字符串，包含换行和缩进*/

p.innerHTML//这是一段文本 <span></span>"
//这里innerHTML返回了p所包含的全部的节点的所包含的各种值了，以字符串的形式。

3.6 DOM event flow

The DOM event flow consists of three phases: the capture phase, the target phase, and the bubbling phase.

• In the capture phase, the event propagates down from the root node of the document until it reaches the target element;
• In the target phase, the event arrives at the target element;
• During the bubbling phase, the event propagates upwards from the target element until it reaches the root node of the document.

The difference between bubbling events and capturing events is the order in which they are fired in the DOM event stream. Bubbling event listeners are triggered during the bubbling phase, while capturing event listeners are triggered during the capturing phase.

For example, suppose you have the following HTML code:

<div id="myDiv">
    <button id="myBtn">Click me!</button>
</div>

If we add to both the div element and the button elementclick event listener, then when we click on the button element, both listeners will be triggered. But the order in which they fire depends on whether they are bubbling or capturing event listeners.

• If they are both bubbling event listeners, then the button element's listener will fire first, followed by the div element's listener.
• If they are both capturing event listeners, then the div element's listener will be triggered first, followed by the button element's listener.

04 Appendix: Reprint Operation Mind Map

4.1 DOM basic operation mind map

4.2 window object mind map

4.3 Reprint address

Reprinted from: Click here