Home > Developer > JavaScript
| Closed | Check whether the reference window is closed. |
| DefaultStatus | Set or obtain the default information to be displayed on the status bar at the bottom of the window. |
| DialogArguments | Set or obtain the variable or variable array passed to the mode dialog box. |
| DialogHeight | Set or retrieve the height of the dialog box. |
| DialogLeft | Set or obtain the left coordinate of the mode dialog box. |
| DialogTop | Set or obtain the top coordinates of the mode dialog box. |
| DialogWidth | Set or obtain the width of the dialog box. |
| FrameElement | Obtain the information generated in the parent documentWindowFrame or iframe object. |
| Length | Sets or obtains the number of objects in a collection. |
| Name | Set or obtain the value indicating the window name. |
| OffscreenBuffering | Set or obtain whether to draw an object out of the screen before it is visible to the user. |
| Opener | Set or obtain the reference of the window that creates the current window. |
| Parent | Obtain the parent of an objectWindow. |
| ReturnValue | Set or obtain the value returned by the slave mode dialog box. |
| ScreenLeft | Obtain the x coordinate between the upper left corner of the browser client area and the upper left corner of the screen. |
| ScreenTop | Obtain the y coordinate between the upper left corner of the browser client area and the upper left corner of the screen. |
| Self | Gets a reference to the current window or framework. |
| Status | Set or obtain the status bar at the bottom of the window. |
| Top | Obtain the top-level ancestor window. |
These are just the properties of the window. There are more events and methods, so I won't copy them, and it doesn't make any sense. This class is emphasized here, when you want to achieve a certain effect, you may think about our lovely window class, which has the functions you want.
The body element will host the following window object events: onblur, onbeforeunload, onfocus, onload and onunload.
Next we will use window to make a prompt when the page leaves:
We usually receive a prompt when we leave the page. For example, if you are sure to leave, you only need to add one sentence at the body node:
<Body onbeforeunload = "return 'Are you exiting? '">
In this way, there will be a prompt when you leave.
In this example, note the following three points:
Either of the return 'xxxxx' semicolons is allowed. If only the string is written, no prompt is displayed.
I have previously stressed that because the onbeforeunload event is followed by double quotation marks, return must be enclosed in single quotation marks.
This statement is effective for FF, chrome, and IE. The trigger mechanisms of chrome and IE are the same. The phenomenon is that the return string is written in the confirmation column. I guess the process should be like this: the user clicks the close button to trigger the onbeforeunload object. If the onbeforeunload object returns a string, it will start up with a warning and display the string. But FF is different. Only the default warning is displayed.
The following prompt appears in chrome:
The returned sentence appears above the navigation bar, which has the same effect as IE (if IE is not displayed, just click to allow the script to run .).
If it is FF, only the upper-layer prompt will appear, which has nothing to do with the sentence we wrote. Even so, we still need to write, otherwise FF will not prompt.
So if we want to display our own items in its confirmation box, I tried many times and found that FF could not replace its default box with other dialogs, therefore, we can only add one confirm silently, but in this case, FF will have two prompts. Both IE and chrome will enter the return string of the function in the exit prompt, which is good. The following is the modified Code after feedback from the first floor.
After testing, this code shows only one prompt in chrome 16.0.912.0, but in some chrome-based browsers (such as sunchrome), the FF and chrome dual prompts will appear, I guess it's because these browsers contain other kernels that I don't quite understand.
In short, let's talk about all the contacts ~ Ah ~
Copy codeThe Code is as follows: <Head>Method 1 means that if this node is written here, IE will run this part of Code while running, but if this node is not available, so this code is normal in FF and chrome, but in IE, two prompts will appear, because it will execute window. confirm also returns chrome.
The above code is tested in various browsers:
Haha, how are you doing ~
Well, next we are looking forward to the DOM (in fact, only LZ is looking forward to it = + ).
The full name of DOM is document object model. It is very important to understand this. I have read many definitions, some of which say it is a platform, and some of which say it is an interface, anyway, I opened its official guide Website: http://www.w3.org/DOM/
Its definition of DOM is:
The Document Object Model is a platform-and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. the document can be further processed and the results of that processing can be ininitialized back into the presented page.
Let me translate it simply: DOM is an intermediate platform/language interface that allows programs and scripts to dynamically access and update content, architectures, and file styles. The file can be further processed and the result is returned to the display page.
In fact, I still see it in the cloud, so we can understand it as a matter of fact, DOM is a unified solution for the convenience of programming and fast transmission, based on the tree specification, it has nothing to do with the browser. The basic idea of DOM is a tree structure. For example, an HTML file is a tree structure. DOM is not bound to any language. We can use JavaScript to dynamically modify html dom.
DOM has three levels: core Dom, xml dom (*), and html dom. The one in the middle is widely used as a document transmission standard, but here we will focus on html dom.
DOM divides documents into tree structures with elements, attributes, and texts, and uses these as nodes to construct the tree structure of documents. In this way, you can access all nodes through one node.
The previous given the website (http://www.jb51.net/w3school/js/jsref_obj_string.htm) inside the more comprehensive DOM stuff, can be used for reference, but used to do the tutorial is still a little stiff.
I plan to first introduce the node type and then map it 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 that will NOT be 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 |
After learning about this, we can use a small html file to view the DOM tree structure:
HTML text
Tree Structure Analysis
PS: In theory, the br is not a node, but I'm not sure. People who want to know will tell me about it ~.
1. The file is always the root node. You can directly use document.doc umentElement or document. body to obtain the file.
2. The script is also a node. All scripts in <> are nodes, including comments.
3. the node name, which is similar to the hear title, is the tagName of the node.
For a method to get another Node from a Node, it is nothing more than up, down, or parallel. For details, you can view the attributes and methods of the DOM Node object in the website shown above, I will not list them one by one. (Some of the above items are unavailable in IE, so we should consider how to use them after testing .)
After reading the methods of nodes in the DOM, let's make a small application:
When you click, you can add the enable or disable sub-options.Copy codeThe Code is as follows: <Head>
<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
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>
</Head>
<Body>
<Span id = "chapter1">
<A href = "#" id = "chaptername1" onclick = "openlist ()"> chapter 1 </a>
</Span>
<Br>
<Span name = "L1">
<P> babababababbabbaba </p>
</Span>
<Span name = "L2">
<P> babababababbabbaba </p>
</Span>
<Span name = "L3">
<P> babababababbabbaba </p>
</Span>
<Body>
</Html>
All browsers are tested correctly.
Of course, this effect can be achieved through many methods, just to learn how to control NODE through DOM.
Add one point: In addition to adding or deleting a node, the node can also be cloned. The function is cloneNode. Besides setAttribute, you can also attach events. For example, this node has an onclick event, you can use the addEvent function. I will not write any more. The truth is the same ~.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
