Shulou(Shulou.com)06/01 Report--

This article Xiaobian for you to introduce in detail "what is the difference and usage of DOM and BOM in JavaScript", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the difference and usage of DOM and BOM in JavaScript" can help you solve your doubts.

i. Summary: what is DOM and what is BOM?

At the beginning of the article, I would like to mention in general terms what is DOM and what is BOM, because this article is ultimately aimed at friends who have some basic knowledge of JavaScript but do not know or even know DOM and BOM.

But before we talk about what DOM is and what BOM is, let me show you the structure of the whole Javascript:

In the picture above, we can see that there are four elements: JavaScript,ECMAScript,DOM and BOM, so what is the relationship between them? Summarize the relationship between them in a formula:

JavaScript = ECMAscript + BOM + DOM

Let's give an overview of them one by one:

ECMAscript:

ECMAScript is a script programming language standardized by ECMA International (formerly known as the European Association of computer Manufacturers) through ECMA-262. It is the standard of JavaScript (JS for short), and browsers implement this standard.

ECMAscript is more like a rule that dictates how browsers execute the syntax of JavaScript, because we know that JavaScript is a scripting language running on browsers! With the rules, but we still lack the way to interact with the various elements in the page, the following DOM is born!

DOM:

DOM (Document Object Model, document object Model) is a language-independent API for manipulating xml,html documents.

For JavaScript: in order to enable JavaScript to operate Html,JavaScript, you have your own DOM programming interface.

To sum up: DOM provides JavaScript with a "method" to access and manipulate HTML elements (the word interface is not used for fear that some friends will be afraid of the interface, but in fact the most accurate description is to provide an interface for JavaScript)

BOM:

BOM is Browser Object Model, the browser object model. BOM is an interface that appears to control the behavior of browsers.

For JavaScript: in order for JavaScript to control browser behavior, JavaScript has its own set of BOM interfaces.

To sum up: BOM provides JavaScript with a "way" to control browser behavior.

Finally, of the above three JavaScript components, ECMscript is a specification, while the other two provide "methods", corresponding to HTML elements and browsers, respectively, so we will systematically explain the latter two: DOM and BOM. For rookies, my later explanation will be as simple and easy to understand as possible, and the foundation is not good enough to rest assured to eat!

II. DOM and its related operations

First of all, let's talk about the relevant knowledge of DOM. I divided it into two parts:

II.I DOM tree

OK, then what is a DOM tree?

Some beginners who have studied DOM may be a little strange to hear this word, but in fact, the DOM tree is not particularly magical. On the contrary, for the front-end staff, the DOM tree is the tree made up of the HTML elements of the page you deal with every day:

In the BOM tree, each node can have two identities: it can be a child of the parent node, or it can be the parent of other child nodes. Let's take a look at the following code:

DOM_demo

Crayfish dancing the tango

In the above code, its DOM tree should look like this:

At this point, someone has to ask, do you say that such a half-day DOM tree has anything to do with manipulating html elements?

The answer is very relevant, and only by understanding the DOM tree structure of the document can you accurately and effectively manipulate DOM elements, otherwise there will be all kinds of unexpected bug. Before we manipulate the HTML element of a page, we need to have a clear drawing of the DOM of the entire page, even if we are not actually drawing, there should be a clear vein structure in the brain.

Some common operation element methods of II.II DOM

With regard to some common methods of manipulating html elements in DOM in JavaScript, I will divide them into several sub-sections to introduce you:

Get the DOM method of the node / / 1. Get an element by its id attribute value, which returns an element object var element = document.getElementById (id_content) / / 2. Get an element by its name attribute value, which returns an array of element objects var element_list = document.getElementsByName (name_content) / / 3. Get an element by its class attribute value, which returns an array of element objects var element_list = document.getElementsByClassName (class_content) / / 4. Getting the element through the signature returns an element object array var element_list = document.getElementsByTagName (tagName) DOM method / / 1 that gets / sets the attribute value of the element. Gets the attribute value of the element, passing parameters are naturally attribute names, such as class, id, hrefvar attr = element.getAttribute (attribute_name) / / 2. Set the attribute value of the element, passing parameters are naturally the attribute name of the element and the corresponding attribute value to be set, element.setAttribute (attribute_name,attribute_value) create node (Node) DOM method / / 1. Create an element of html. Pass parameters to the element type, such as p, H2-5, a. Take p as an example, var element = document.createElement ("p") / / 2. Create a text node and pass parameters to the corresponding text content (note that it is a text node, not a html element) var text_node = document.createTextNode (text) / / 3. Create an attribute node with the corresponding attribute name var attr_node = document.createAttribute (attribute_name) element.setAttributeNode (attr_node)

Pay special attention to the third, create attribute node this method, to match with a specific element, that is, you have to get a specific element element, create an attribute node, and finally add this attribute node to this element (setAttributeNode).

Add the DOM method of nodes / / 1. Add a node to the end of the element, passing in the node type element.appendChild (Node) / / 2. Insert a node in front of an existing node within the element, and still pass in a parameter of node type element.insertBefore (new_Node,existed_Node)

Note that before adding a node, you need to create the node, select the parent node element, and the second method is even to find the sibling node behind the insertion position.

Delete the node's DOM method / / Delete a node in the element. The parameter passed is the node type parameter element.removeChild (Node)

Note that when deleting, the corresponding parent node element must be found before it can be deleted smoothly.

Some common properties of DOM

Finally, there are some common DOM properties:

/ / 1. Get the parent node of the current element var element_father = element [XSS _ clean] / / 2. Gets the html element type child node var element_son = element.children//3 of the current element. Gets all types of child nodes of the current element, including html elements, text, and attributes var element_son = element.childNodes//4. Gets the first child node of the current element, var element_first = element.firstChild//5. Gets the previous sibling element var element_pre = element.previousSibling//6 of the current element. Gets the last sibling element of the current element, var element_next = element.nextSibling//7. Get all the text of the current element, including the html source code and the text var element_innerHTML = element [XSS _ clean] / / 8. Gets all the text of the current element, excluding the html source code var element_innerTEXT = element.innerText

Among them, the seventh means that the html code and text in the element are converted into text, the original html code is executed, and the conversion to text is equivalent to becoming an ordinary string!

An overview of III. BOM and its related operations III.I BOM

Let's talk about BOM again. Due to the limited space, BOM does not give a particularly detailed explanation (it is really not as practical as DOM). Let's review the introduction to BOM at the beginning:

BOM provides JavaScript with several "methods" to manipulate the browser.

So first of all, let's sort out the structure of the entire BOM with a diagram. Similar to DOM, BOM also has a tree structure:

Introduction to III.II BOM Common objects window object

From the picture above, we can see:

Window is the top of the food chain of the entire BOM tree, 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 number of frames in the parent window of the current window length window the document object alert (string) currently displayed in the document window creates a warning dialog box Displays a message close () closes window confirm () creates a dialog box that requires user confirmation open (url,name, [options]) opens a new window and returns a new window object prompt (text,defaultInput) creates a dialog box that requires the user to enter information setInterval (expression,milliseconds) calculates an expression setInterval (function,millis enconds, [arguments]) after a specified time interval calls a function setTimeout (expression) after the specified time interval Milli seconds) evaluates an expression setTimeout (expression,milli seconds, [arguments]) after the timer expires, evaluates a function after the timer expires

Among them, you can see that there is a function alert () above, because when you learn JavaScript, most input and output stream experts use the alert () function pop-up window as their first demo, so when you see here, you may ask:

When I used the alert () function at that time, I didn't seem to mention window, so is alert () the same alert () I learned before? The answer is as follows:

These two alert () are indeed the same function, and the reason why we can not add window is that all properties and methods of window can be expressed in two ways:

(1) window. Attribute / window. Method ()

(2) Direct property / method () call

Not only alert (), all the above window properties and functions are set up, and interested partners can try it on their own.

Location object

What is a location object?

The location object is a property of the window object that provides information about the document loaded in the current window, as well as some navigation features.

The location object has the following common properties and methods:

Property / method content host hostname: Port number hostname hostname href entire URLpathname path name port port number protocol protocol partial search query string reload () overload current URLrepalce () replace current page with new URL

In fact, if we take a closer look at the structure diagram above, we will find that:

The location object is not only a property of the window object, but also a property of the document object.

This means:

_ window.location = location = _ document.location

History object

What is a history object?

The history object is a property of the window object, which holds a record of users surfing the Internet. The timestamp of this record is counted from the moment the window is opened.

The history object has the following common properties and methods:

Properties / methods describe the number of records in the lengthhistory object back () to the previous URL of the browser history entry, similar to backward forward () to the next URL of the browser history entry, and similar to forward go (num) browsers forward or backward navigator objects in the history object

Finally, let's introduce the navigator object:

The navigator object is a window property in BOM that identifies the client browser.

Some common attributes related to navigator:

Property description appName full browser name and version information the default language of the platform operating system the default language of the userLanguage operating system is the array of plug-in information installed in the userAgent browser on which the userAgent browser is located

After reading this, the article "what is the difference and usage of DOM and BOM in JavaScript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.