Implement the composition of JavaScript (detailed interpretation of BOM and DOM)

Below I will bring you an article on how to implement JavaScript (detailed interpretation of BOM and DOM). Now I share it with you and give it as a reference.

We know that a complete JavaScript implementation needs to be composed of three parts: ECMAScript (core), BOM (Browser Object Model), and DOM (Document Object Model).

BOM:

BOM provides many objects for accessing browser functions that have nothing to do with the content of the web page (these are DOM ), currently, BOM has been moved into the HTML5 specification by W3C.

window object:

The core of BOM represents an instance of the browser. It is both an interface for accessing the browser window through javascript and a Global specified by ECMAScript. Object, which means any object, variable and function defined in the web page, has window as its Global object, and therefore has access to methods such as paresinInt(). (Excerpted from Height Three). In addition, if a web page contains frames, each frame has its own window object and is stored in the frames collection (starting at index 0, ltr, ttb).

First of all, the variables and functions in the global execution environment are all properties and methods of the window object. Of course, there is a slight difference between global variables and the directly defined window property type. Global variables (to be precise, explicitly declared global variables) cannot be deleted, but the window property can. In addition, there is another detail to note. Trying to access undeclared variables will cause an error, but there is no problem using the query window object.

So, what are the common properties or methods of window?

1.name, each window object has a name attribute, which contains the name of the frame. Usually to understand window relationships and frames.

2. Window position method: moveTo (x coordinate of new position, y coordinate of new position), moveBy (move x horizontally, move y vertically). These two methods are not applicable to the framework.

3. Window size attribute: innerWidth/Height (size of the view area (minus the width of the border)/* IE, Safari, firefox */), outerWidth/Height (returns the size of the browser window/* IE, Safari, firefox */). In Chrome, inner and outer both return the size of the view area.

Of course, you can change the window size through resizeTo (new window width, new window height), resizeBy (increase x than the original width, increase y than the original height). This love song method does not apply to frame structures.

4.window.open(URL, window target, attribute string, boolean whether the new page replaces the currently loaded page in the browser history) is used to navigate to a specific URL or open a new window . If a window target is specified and the window target is the name of an existing window or frame, the specified url will be loaded in the renamed window or frame. Otherwise, the new window that opens is named the target window. Of course, the keywords that can be specified for the window target include _self, _parent, _top, and _blank.

<a href=http://www.jb51.net>click me</a>
  　　<script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
　　</script

The specific settings of the characteristic string here will not be described in detail. Those who are interested can click here

5. As a single-threaded language, js still allows setting the timeout value (specified Execute code after the event) and interval time value (cycle every specified time) to schedule code execution at a specific moment.

Timeout call: setTimeout (js code string, millisecond time). As a single-threaded language, the js task queue can only execute one piece of code at a time. If the task queue is empty after the set time interval, Then execute the code string, otherwise, wait until the previous code execution is completed before executing.

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

Here, I called an anonymous function to output good after 5 seconds, and a warning box popped up in the window to display 2. It can be seen that the setTimeout() function returns a numerical ID, which is unique, then we You can use this ID to clear the timeout call, and you can use clearTimeout(ID) to clear it.

Indirect call: setInterval(), it accepts the same parameters as setTimeout(), and also returns a numerical ID, which can be cleared using clearTimeout().

6. System dialog box methods: alert(), confirm(), prompt(), etc. are written in my previous blog, click here

location object

Rather than being an object in the BOM, it is better to say that Location is an attribute in the window object. Of course, it is also an attribute of the document object in the DOM that will be discussed later, that is, window.location and document. location refers to the same object.

Location object attribute list. Modifying these attributes can load a new page and generate a new record in the history. Using location.replace() will not generate new records in the history.

navigator object: The de facto standard used to identify browsers. Its properties and methods are mainly used to detect the type of browser.

The rest, such as the history object (save historical records) and the screen object (indicates the client's capabilities), are not useful in programming in js, so they will not be described in detail.

-------------------------------------------------- ----------------------------------

DOM:

DOM is an API based on XML and extended for HTML. DOM relies on node tree expansion.

First of all, we need to make it clear that the document node is the root node of each node. The document node has and has only one child node, which is the element html (document element).

Node type:

An interface in DOM1, implemented by all DOM node types (text nodes, attribute nodes, element nodes), this interface is used in js as Node type implementation.

nodeType attribute, owned by each node. Represented by 12 numerical values, element--1, attribute--2, text--3...

nodeName attribute. For element nodes, the value of nodeName is the label name.

nodeValue attribute, for element nodes, the value of nodeValue is null.

Node relationship: Each node has a childNodes attribute and saves a NodeList (like array object) object. Each node has a parentNode attribute that points to the parent node. The nodes in childNodes have the same parentNode. Sibling nodes can be accessed using the previousSibling and nextSibling properties. At the same time, childNodes[0]==firstChild, childNodes[childNodes.length-1]==lastChild.

Operation node: appendChild(), push a node to the end of NodeList, and return the newly added node. insertBefore(), unshifts a node to the head of NodeList and returns the newly added node. replaceChild(newChild,targetChild), replaces the target node. The original node is still in the document, but has no position. removeChild(tragetChild), removes nodes, has a similar effect to replaceChild(). cloneChild(boolean), true means complete copy (entire node and child nodes), false means basic copy.

Document type:

represents the document. The document object is an instance of HTMLDDocument (inherited from the Document type) and represents the entire html page. At the same time, the document object is also a property of the window object, so it can be accessed as a global object. document.firstChild==html. document.body==body. document.doctype--->Reference to . document.title--->title document.url--->location.url.

Find elements: getElementById(),getElementsByTagName(),getElementsByClassName().

Document writing Input: write(), writeln(), open(), close()

Element type:

getAttribute(), to get attributes for class, use " class", instead of className, you can get the class attribute when using element.className.

setAttribute(), set the attribute, and replace it if the attribute exists. Otherwise, create.

removeAttribute(), completely remove element attributes.

createElement(), creates a new element.

Text type:

createTextNode(), creates a text node. If two text nodes are adjacent sibling nodes, the two texts will be connected, no Space.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Basic specifications of JavaScript

Basic usage of Javascript

## Sample code for creating fireworks special effects using p5.js_javascriptTips

The above is the detailed content of Implement the composition of JavaScript (detailed interpretation of BOM and DOM). For more information, please follow other related articles on the PHP Chinese website!