JavaScript Basics 4 Window objects, Dom

JavaScript Basics 4 Window objects, Dom_ basics

Last Update:2017-01-19 Source: Internet

Author: User

Tags processing instruction

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

His attributes are also very rich, because I am lazy, I directly copied the contents of the manual:

Closed	Gets whether the reference window is closed.
Defaultstatus	Sets or gets the default information to display on the status bar at the bottom of the window.
Dialogarguments	Sets or gets an array of variables or variables passed to the modal dialog window.
Dialogheight	Sets or gets the height of the modal dialog box.
Dialogleft	Sets or gets the left coordinate of the modal dialog box.
Dialogtop	Sets or gets the top coordinate of the modal dialog box.
Dialogwidth	Sets or gets the width of the modal dialog box.
FrameElement	Gets the frame or IFrame object that generated the window in the parent document.
Length	Sets or gets the number of objects in the collection.
Name	Sets or gets a value that indicates the name of the window.
Offscreenbuffering	Sets or gets whether the object should be drawn out of the screen before it is visible to the user.
Opener	Sets or gets a reference to the window where the current window is created.
Parent	Gets the parent window in the object hierarchy.
ReturnValue	Sets or gets the value returned from the modal dialog box.
Screenleft	Gets the x-coordinate of the upper-left corner of the browser's client area relative to the upper-left corner of the screen.
Screentop	Gets the y-coordinate of the upper-left corner of the browser's client area relative to the upper-left corner of the screen.
Self	Gets a reference to the current window or frame.
Status	Sets or gets information about the status bar at the bottom of the window.
Top	Gets the topmost ancestor window.

These are just the properties of window, he has more events and methods, I do not copy, also meaningless, this emphasis on this class, so that you want to achieve a certain effect but can not start, think of our lovely window class, it is likely to have the function you want.

Where the BODY element will be the host of the following Window object events: onblur, onbeforeunload, onfocus, onload, and onunload.

The following window to do a page to leave the hint:

We usually have tips for leaving the page. such as whether to confirm the departure and so on, in fact, as long as the body knot add a sentence is good:

<body onbeforeunload= "Return ' Are to you exiting? '" >
That way, you'll be prompted when you leave.

In this example, we note 3 points:

Must write return ' xxxxx ' semicolon there is no all can, if only write string, is not prompted.
Previously highlighted issues, because there are already double quotes behind the onbeforeunload event, the return must be enclosed in single quotes.
This sentence is valid for FF, Chrome,ie, where the trigger mechanism of chrome and IE is the same, the phenomenon is: write back the string in the confirmation column. I guess the process should be this: the user clicks on the Close button to trigger the onBeforeUnload object, at which point if the onBeforeUnload object return value is a string, it will go up warning and display string. But FF is not the same, only the default warning is displayed.

The following tips are available in chrome:

The returned sentence appears above the navigation, as is the effect of IE (if IE does not show, click to allow the script to run.) )。
If it is FF, then only the top of the hint, and we wrote that the sentence has nothing to do, however, we still have to write, otherwise FF no hint.

So if we want to get its confirmation box to appear in our own things, I tried many times and found that FF could not do with another dialog box to replace its default box, so we can only silently add a confirm, but in this case FF will have two times prompt. IE and chrome will enter the return string for the function in the exit prompt, which is not bad, but the following is the modified code after the first floor feedback.

After testing, this code shows only one prompt in Chrome 16.0.912.0, but in some chrome-based browsers (such as Sunchrome) there are FF and chrome double prompts, I guess because these browsers contain other kernels, I don't quite understand what's going on.

In short, the whole of the contact bar ~ Ah ~

Copy Code code as follows:

<title>testing</title>
<script type= "Text/javascript" src= "Js/output.js" ></script>
<script language= "javascript" for = "window" EVENT = "onbeforeunload" >//for IE
Return ' sure to exit? (IE) "///If the string is returned, you will be prompted whether to leave the page
If this node is not present, the Chrome balloon will be displayed.
</script>
<script type= "Text/javascript" >
function closing () {
var res=confirm ("Are you exiting?" ( FF) "); This will be shown in FF.
Return ' Are you exiting? (Chrome) "; This will be shown in chrome
}
</script>
<body onbeforeunload= "return closing ();" >
Testing
</body>

One of the means is: if you write this node here, then IE will run this part of the code, but if there is no this node, then the code in FF and Chrome normal, but in IE, there will be two prompts appear in the case, This is because it will both execute window.confirm and return to the chrome line.

The following is a test of the above code in each browser:

Haha, how, good?
Well, the next is the DOM of all expectations (in fact only LZ expecting it = =+)

DOM's full name is Document Object model, how to understand this thing is very important, I read a lot of definitions, some say it is a platform, some say it is an interface, anyway, I opened its official guide website: http://www.w3.org/DOM/

It defines the DOM as:

The Document Object Model is a Platform-and language-neutral interface that would allow programs and scripts to Dynamicall Y access and update the content, structure and style of documents. The document can be further processed and the results of that processing can is incorporated back into the presented page.

Let me simply translate it: DOM is a platform/language intermediate interface that allows programs and scripts to dynamically access and update content, schemas, and file style. The file can be processed further and the result returned to the display page.

In fact, I read it is still foggy, so you can understand, Dom is a everyone in order to facilitate programming, transmission speed and unified, based on the tree specification, it is not related to the browser. The basic idea of DOM is a tree structure, such as an HTML file, which is a tree structure. Dom is not bound to any language, we use JS to make dynamic changes to the HTML DOM.

The DOM has three levels, which can be divided into three parts: Core DOM, XML Dom (*), and HTML dom. The middle one is a document transfer standard, and it's very extensive, but the HTML DOM is highlighted here.

Dom divides the document into a tree structure with elements, attributes, and text, and then constructs the document's tree structure as a node, so that all nodes can be accessed through a node.

The previous site (http://www.jb51.net/w3school/js/jsref_obj_string.htm) has a relatively full dom of the stuff, can be used for reference, but for the tutorial is a bit blunt.

I'm going to introduce the node type first, and then I'll correspond to the code.

Node type introduction (Replication from http://www.jb51.net/w3schools/jsref/dom_obj_node.htm)

Node Type	Description	Children	Value	Constant
Element	Represents an Element	Element, Text, Comment, ProcessingInstruction, Cdatasection, EntityReference	1	Element_node
Attr	Represents an attribute	Text, EntityReference	2	Attribute_node
Text	Represents textual content in an element or attribute	None	3	Text_node
Cdatasection	Represents a CDATA section in a document (text, won't be is parsed by a parser)	None	4	Cdata_section_node
EntityReference	Represents an entity reference	Element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference	5	Entity_reference_node
Entity	Represents an entity	Element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference	6	Entity_node
ProcessingInstruction	Represents a processing instruction	None	7	Processing_instruction_node
Comment	Represents a comment	None	8	Comment_node
Document	Represents the entire document (the Root-node of the DOM tree)	Element, ProcessingInstruction, Comment, DocumentType	9	Document_node
DocumentType	Provides an interface to the entities defined for the document	None	10	Document_type_node
DocumentFragment	Represents a "lightweight" document object, which can hold a portion of a document	Element, ProcessingInstruction, Comment, Text, Cdatasection, EntityReference	11	Document_fragment_node
notation	Represents a notation declared in the DTD	None	12	Notation_node

Well, after about that, we use a small HTML file to view the DOM's tree structure:
HTML text

Copy Code code as follows:

<title>DOMcheck</title>
<body>
<a herf= "#" >click here</a>
<br>
<input type= "Test" id= "in" ></input>
<input type= "button" id= "but" value= "here~" ></input>
<body>

Tree-shaped structure analysis

PS: In theory, BR is not a node, but I am not sure, want to know people tell me under ~.
1. The file is always the root node, and obtaining the document node can be obtained directly using document.documentelement or document.body.
2.script is also a node, all <> inside, are nodes, including annotations.
3. The name of the node, which is similar to hear title, is the tagname of the node.
For a way to get other nodes from a node, it is nothing more than to go up, down, or parallel three directions, to see the properties and methods of the DOM node objects in the Web site given above. (Some of the above things in IE is not available, specific to be considered after testing how to use.) ）
After looking at the various methods of the nodes in the DOM, we make a small application:
When the user clicks, you can add open or close sub options.

Copy Code code as follows:

<title>dom check</title>
<script type= "Text/javascript" >
var Ifopen=false;
function get (Element) {
return document.getElementById (Element);
}
function Crea (element) {
return document.createelement (Element);
}
function Openlist () {
var titl=get ("Chapter1");
if (Get ("Sub1") ==null) {
var S=crea ("span")
S.setattribute ("id", "sub1");
}
Else
S=get ("Sub1");
Ifopen=!ifopen;
if (Ifopen) {//If not open
S.innerhtml= "<br><a href= ' #L1 ' >list1</a>" +
"<br><a href= ' #L2 ' >list2</a>" + "<br><a href= ' #L3 ' >list3</a>";
Titl.appendchild (s);
}else{
var de= document.getelementbyid ("sub1");
De.parentNode.removeChild (DE);
}
}
</script>
<body >
<span id= "Chapter1" >
<a href= "#" id= "chaptername1" onclick= "Openlist ()" >chapter 1</a>
</span>
<br><br><br><br>
<span name= "L1" >
<p>babababababbabbaba</p>
</span>
<span name= "L2" >
<p>babababababbabbaba</p>
</span>
<span name= "L3" >
<p>babababababbabbaba</p>
</span>
<body>

The browser tests correctly.

Of course, this effect can be achieved in a number of ways, just to learn if node is controlled by the DOM.

Add a point : In addition to can add delete, can also clone, function is CloneNode, in addition to setattribute, can also be attached to events, such as the node has the onclick such events, You can use the Addevent function to implement this. Specific I will no longer write, the truth is the same ~.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More