Javascript-element Element Object

Source: Internet
Author: User

Statement: The material used in this column is written by the VIP students of the Kay Academy, who has the right to be anonymous and has the final right to interpret the article; The Edith Academy is designed to promote students to learn from each other on the basis of public notes.

Element elements

The previous article describes the element object, which represents the elements in the HTML. The element object can have a child node of type elements node, text node, annotation node, so-called node is a LABEL element, document object can get element object, can pass document. Element to access it.
Then also introduced the related properties and methods, common properties and methods, mind mapping:

For an element tag operation type:

For attribute operations:

Then take a couple of examples:
1.getElementById and Classname,getelementbyid can get element objects through the element's ID value, classname can return the name of the class style selector for the element object or set a class style selector for the element object.
By the way, the OnLoad event can load the contents of the tag before executing the script code, such as I am in < body > Write this event, then < SCRIPT > tag can be written on the < BODY > tag, Do not worry about loading order, because after writing this event, the contents of the < BODY > tag are loaded, and then the script in the < SCRIPT > tag is executed.
code example:

Operation Result:

2.createElement creates an element object, SetAttribute sets the value of the element property, getattribute the value of the element property, RemoveAttribute deletes the element's attributes, AppendChild adds a child tag, This tag is added to the last face, and as the last child node, innertext sets the contents of the text within the label.
code example:

Operation Result:

Set the Title property:

After clicking the Title property will be deleted, it will not show this content:

RemoveChild can delete the added child nodes:

Operation Result:

3.innerHTML Sets or returns the year content of an element that can be used to add labels to a page.
code example:

innerHTML is the entire label that is added directly, and AppendChild adds a created element object.

Operation Result:

These are examples of several common properties and methods in the Element object.

Here are some of the properties of the location, screen, and history objects:
1.location: Described earlier, this object contains information about the current URL address bar.
code example:

2.screen: object contains information about the client display screen.
code example:

3.history: The object contains the URL that the user has accessed in the browser window, that is, the history record.
code example:

Here are some of the objects in javascript:
1.String is a string object in JavaScript.
code example:

2.Number is the original numeric wrapper object in JavaScript. code example:

3.Date objects are used to process dates and times.

Operation Result:

4.Math objects are used to perform mathematical tasks.

Operation Result:

5.Array is an array object in JavaScript, which has been described before.

A 6.RegExp object is used to represent a regular expression, which is a powerful tool for performing pattern matching on strings.

Operation Result:

Validation of form submissions using javascript:
An event is needed here: onsubmit, which fires when the confirmation button in the form is clicked, and then decides to submit the form based on the return value of the function. The return value of the function is true to submit the form, false to not submit the form.

code example:

Operation Result:
If two times the password input is not the same, it will return false, the form will not be submitted:

If the password is entered consistently two times, it returns true and submits the form:

Javascript-element Element Object

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.