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;
}
}
</scriptThe 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); //2Here, 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.
| hash | "#contents" | Returns the hash in the url, There is no response for "" |
| ##host | "www.google.com" | Return the server name and port number (if any) |
| hostname | "www.google.com " | Returns the server name without the port number |
| "www.google.com" | Returns the complete url of the current page, calling assign() | |
| ##''/wileyCDA/' | Return directory name | |
| "8080" | Returns the port number, if not, returns an empty string | |
| "http:" | The protocol used by the return page | |
| "?=javascript" | Returns the query string, starting with a question mark |
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
