Home > Developer > Web Develop
DOM object and built-in object (on), dom object built-in
Preface
In the first blog "Understanding JavaScript", we have introduced the top Object window in DOM and DOM tree, as well as its subobject.
Document. Next we will introduce some of their practical objects and methods, such:
1. alert (), prompt (), and confirm () interact with users.
2. Use getElementById () to select a page element.
3. Use innerHTML () to access HTML content.
4. Use the history object of the browser.
5. Obtain the browser information through the navigator object.
6. Use the Date object to operate on the Date and time.
7. Use the Math object to simplify the calculation.
Some methods of window objects are used to process input and output information, so as to realize interaction between pages and users.
Alert () has appeared many times in the previous blog. It mainly displays an information dialog box to the user, but this modal dialog box only displays one
And a "OK" button.
Note: The term "Modal" means that the script is temporarily stopped and the page interaction with the user is also paused until the user closes the dialog box.
The usage of alert () is as follows:
<!DOCTYPE html>
The effect is as follows:
1.2 confirm ()
Similar to the alert () method, confirm () also displays a modal dialog box to show you some information. The difference is that the confirm () dialog box is
The user provides an option. You can click "OK" or "cancel", not just a "OK" button. Clicking any button will close the dialog box,
The confirm () method returns different values based on the button that is run on a single machine. For example:
<! DOCTYPE html>
The code above calls the showConfirm () method by clicking the button, returns the status of the clicked button, click OK to return true, and click Cancel to return
False, and write to the page through the document. write () method.
The effect is as follows:
1.3 prompt ()
Prompt () is another way to open the modal dialog box, which allows users to enter information. The call method of the prompt () dialog box is the same as that of confirm ().
. The prompt () method can also have a second optional parameter, indicating the default input content. This prevents users from clicking the "OK" button without entering any
Content. For example:
<! DOCTYPE html>
The effect is as follows:
. 2. Select an element based on the id.
If you want to select an element with a specific id from the HTML page, you only need to use the id of the corresponding element as the parameter to call
The getElementById () method returns the DOM object corresponding to the page element of a specific id, as shown in the following example:
<! DOCTYPE html>
The above Code uses the getElementById () method of the document Object to obtain the input object whose id is "button_1", and uses the custom function
GetInputId (id) obtains the value, id, and type attributes of the input object. (</Br> indicates a line break)
The effect is as follows:
InnerHTML attributes
The innerHTML attribute is a useful attribute for many DOM objects. It can be used to read or set the HTML
For example:
<! DOCTYPE html>
In the preceding procedure, we set two buttons: "edit" and "display".
1. Click "edit" to call the setInnerHTML ('div _ id') method:
Document. GetElementById (id ).InnerHTML="<P> changed content </p>";Use the en. getElementById (id) method to obtain the div object whose id is 'div _ id', and then use innerHTML to set the content of the selected element.
2. Click "show" and call the getInnerHTML ('div _ id') method to obtain the HTML content in the <div> element through innerHTML.
The effect is as follows:
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------------
For more information, see http://blog.csdn.net/hai_qing_xu_kong/article/details/48210607 .
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
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
