At the beginning of the article, I want to mention in general terms , what is DOM and what is BOM , because this article is ultimately aimed at friends who have a certain JavaScript foundation, but do not understand or even know about DOM and BOM. .
However, before we talk about what is DOM and what is BOM , please allow me to show you the entire structure of Javascript :
In the picture above, we can see that there are four elements: JavaScript, ECMAScript, DOM and BOM . So what is the connection between the four of them? Use an equation to summarize the relationship between them:
JavaScript = ECMAscript + BOM + DOM
Let's give an overview of them one by one :
ECMAscript:
ECMAScript is a language passed by ECMA International (formerly the European Computer Manufacturers Association) through ECMA- 262 is a standardized scripting programming language . It is the standard for JavaScript (JS for short), and browsers implement this standard .
ECMAscript is more like a regulation that stipulates how each browser executes the syntax of JavaScript , because we know that JavaScript is a scripting language that runs on the browser! There are regulations, but we still lack a way to interact with each element on the page . At this time, the following DOM was born!
DOM:
DOM ( Document Object Model ) is a language-independent application programming interface for operating xml and html documents .
For JavaScript: In order to enable JavaScript to operate Html , JavaScript has its own DOM programming interface .
In one sentence: DOM provides JavaScript with a "method" to access and operate HTML elements (the reason why we don't use the word interface is because we are afraid that some friends will be frightened when they see the interface, but in fact the most accurate description is to JavaScript) interface is provided )
BOM:
BOM is Browser Object Model, browser object model . BOM is an interface that appears to control the behavior of the browser .
For JavaScript: In order to allow JavaScript to control the behavior of the browser , JavaScript has its own BOM interface .
In one sentence: BOM provides JavaScript with a "method" to control browser behavior.
Finally, among the above three components of JavaScript, ECMscript is a specification , while the remaining two provide "methods", corresponding to HTML elements and browsers respectively , so below we focus on the latter two: DOM and BOM , give a systematic explanation . Since it is for beginners, my following explanations will be as simple and easy to understand as possible. If you don’t have a good foundation, you can eat it with confidence !
First, let’s explain the related knowledge of DOM . I divided it into two parts :
Okay, so what is a DOM tree?
Some beginners who have learned DOM may be a little unfamiliar with this word, but in fact, the DOM tree is not a particularly fantasy thing. On the contrary, for front-end staff, the DOM tree is the HTML of the pages you process every day. The tree composed of elements:
In the BOM tree , each node can have two identities: it can be a child node of the parent node, or it can be the parent node of other child nodes. Let's observe the following code together :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM_demo</title>
</head>
<body>
<p>
<a href="https://blog.csdn.net/qq_52736131">Crayfish dancing the tango</a>
</p>
</body>
</html> For the above code, its DOM tree should be like this:
At this time, someone wants to ask, do you think that the DOM tree for so long has something to do with operating html elements ?
The answer is very relevant, and only by understanding the DOM tree structure of the document can we accurately and effectively operate DOM elements , otherwise various unexpected bugs will appear. Before we operate the HTML elements of a page, we must have a clear drawing of the DOM of the entire page . Even if we are not actually drawing, we must have a clear context structure in our mind.
Regarding some common methods of operating html elements in DOM in JavaScript , I have divided them into several sub-parts to introduce them to you:
// 1. Pass Get the element's id attribute value, and return an element object var element = document.getElementById(id_content) //2. Get the element through its name attribute value, and return an array of element objects var element_list = document.getElementsByName(name_content) //3. Get the element through the element's class attribute value, and return an array of element objects var element_list = document.getElementsByClassName(class_content) //4. Get the element through the tag name, and return an array of element objects var element_list = document.getElementsByTagName(tagName)
//1. Get the attribute value of the element. The parameters passed are naturally the attribute names, such as class, id, href var attr = element.getAttribute(attribute_name) //2. Set the attribute value of the element. The parameters passed are naturally the attribute name of the element and the corresponding attribute value to be set element.setAttribute(attribute_name,attribute_value)
//1. Create an html element, and the parameter passed is the element type, such as p, h1-5, a, taking p as an example below var element = document.createElement("p")
//2. Create a text node and pass the corresponding text content (note that it is a text node, not an html element)
var text_node = document.createTextNode(text)
//3. Create an attribute node, and the parameter passed is the corresponding attribute name var attr_node = document.createAttribute(attribute_name)
element.setAttributeNode(attr_node) Pay special attention to the third one. This method of creating an attribute node must be matched with a specific element , that is, you must first obtain a specific element element, create an attribute node, and finally add this attribute node to this element ( setAttributeNode) .
//1. Add a node to the end of element. The parameter passed in is the node type element.appendChild(Node) //2. Insert a node in front of an existing node inside element, and still pass in a node type parameter element.insertBefore(new_Node, existing_Node).
Note that before adding a node , you must first create the node, and at the same time Select the parent node element . In the second method, you even have to find the sibling nodes behind the insertion position .
//Delete a node within element. The parameter passed is the node type parameter element.removeChild(Node).
Note that when deleting, you must find the corresponding parent node element to delete it smoothly .
Finally, some common DOM attributes :
//1. Get the parent node of the current element var element_father = element.parentNode //2. Get the html element type child node of the current element var element_son = element.children //3. Get all types of child nodes of the current element, including html elements, text and attributes var element_son = element.childNodes //4. Get the first child node of the current element var element_first = element.firstChild //5. Get the previous sibling element of the current element var element_pre = element.previousSibling //6. Get the next sibling element of the current element var element_next = element.nextSibling //7. Get all the text of the current element, including html source code and text var element_innerHTML = element.innerHTML //8. Get all the text of the current element, excluding the html source code var element_innerTEXT = element.innerText.
Among them, the seventh one means to convert the html code and text in the element into text , and the original html code is executed. , converting it into text is equivalent to turning it into an ordinary string!
Next, we will talk about BOM again. Due to limited space, BOM will not be explained in detail (the practicality is indeed not as great as DOM). Let’s review the introduction about BOM at the beginning:
BOM provides several "methods" for JavaScript to operate the browser.
First, let’s use a picture to sort out the structure of the entire BOM. Similar to DOM, BOM also has a Tree structure:
From the picture above, we can see:
window is the top of the entire BOM tree food chain , so every newly opened window is considered a window object.
The window object has the following common properties and methods :
| Property/Method | Meaning |
| opener | The parent window of the current window |
| length | The number of frames in the window |
| document | The document object currently displayed in the window |
| alert(string) | Creates a warning dialog box and displays a message |
| close() | Close the window |
| confirm() | Create a dialog box that requires user confirmation |
| open(url, name, [options]) | Open a new window and return the new window object |
| prompt(text, defaultInput) | Create a dialog box that requires the user to enter information |
| setInterval(expression, milliseconds) | calculates an expression after the specified time interval |
| setInterval(function, millis enconds, [arguments]) | calls a function setTimeout(expression, milli seconds) after the specified time interval |
| setTimeout(expression, milli seconds | |
| ) | after the timer expires |
| seconds, [arguments]) | calculates a function after the timer expires. |
Among them, you can see that there is a function alert() above , because when we learn JavaScript, most of us use the alert() function pop-up window as the input and output stream. This is my first demo , so when you see this, you may ask:
When I used the alert() function, it seemed that window was not mentioned . So is the alert() here the same alert() I learned before ? The answer is this:
these two alert() are indeed the same function . The reason why window can be omitted is because all properties and methods of window can be expressed in two ways :
(1) window.property/window. Method ()
(2) Direct attribute/method () call
is not just alert(), all the above window attributes and functions are valid, interested friends can try it by themselves.
What is a location object?
The location object is an attribute of the window object that provides information about the document loaded in the current window and also provides some navigation functions.
The location object has the following common attributes and methods:
| Attribute/method | content | |
| host | host name: port number | |
| hostname | host name | |
| href | entire URL | |
| pathname | path name | |
| port | port number | |
| protocol protocol | part | |
| search | query string | |
| reload() | reloads the current URL | |
| using | repalce() | The new URL replaces the current page. |
In fact, if we carefully observe the structure diagram above, we will find that
the location object is not only an attribute of the window object, but also an attribute of the document object.
This means:
window.location = location = document.location
What is the history object?
The history object is an attribute of the window object. It saves the record of the user's Internet access. The timestamp of this record is calculated from the moment the window was opened.
The history object has the following common attributes and methods:
| Attribute/method | description |
| length | The number of records in the history object |
| back() | goes to the previous URL of the browser history entry, similar to going back |
| forward () | goes to the next URL of the browser history entry, similar to go |
| forward (num) | The browser moves forward or backward in the history object |
Finally, let’s introduce the navigator object:
The navigator object is a window attribute in the BOM that identifies the client browser.
Some common attributes related to navigator:
| attribute | description |
| appName | complete browser name and version information |
| platform | system platform where the browser is |
| plugins | array of plug-in information installed in the browser |
| userAgent | user agent string of the browser |
| userLanguage | default language of the operating system |