Shulou(Shulou.com)05/31 Report--

This article mainly explains "how JavaScript uses DOM to achieve data access". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how JavaScript uses DOM to achieve data access".

Data access through JavaScript and DOM

Accessing and working with a variety of different elements in a Web page is a regular task, which can be easily achieved by using javaScript and the HTML document object Model (DOM). In this article, we will introduce various ways to access page elements and describe how to implement them.

HTML DOM

According to the W3C, "the document object model is a language-neutral interface platform that enables programs and scripts to dynamically access and update the content, structure, and style of documents."

All HTML elements, along with the text and attributes they contain, are accessible through DOM. The contents of an element can be modified or deleted and new elements can be created.

When using DOM and page elements, the most important object is the document. It is contained in the windows object, but you can type and use the document directly in the JavaScript code. When used to access all the elements in a page, it represents the entire HTML document. You can access page elements through collections, properties, and methods. In this article, we will focus on accessing the field elements of the web page in a variety of ways.

Access data

When working with a page and its data, you often need to access an element and data-related information. You can use the following methods when accessing each page element through DOM and JavaScript:

GetElementById (): returns a reference to * objects that own the specified id passed to the method.

GetElementsByName (): returns a collection of objects with the specified name passed to the method.

GetElementsByTagName (): returns a collection of objects with the specified tagname passed to the method.

Listing A contains a simple example that uses the first two methods listed above. It contains a form with two data fields for which data must be entered before the document can be submitted. By passing the appropriate id (for example, the value assigned to the input field through the ID attribute), the getElementById method is used to access * data fields. The getElementsByName method, which accesses the second data field through the value assigned to the name attribute, returns an array value, so I only care about * values (for example, the element value in the array with a subscript index of 0).

Using the getElementsByTagName method, we can choose a different implementation for this situation. This method allows you to manipulate an array object with all the elements of the specified tagged name on the page. For example, the following row is used to combine all the table column elements on the page into an array.

Varcolumns=document.getElementsByTagName ("td")

For our example, I am interested in the input field on the form. Listing B uses the getElementsByTagName method to replace the previous example to contrast with the other two methods. We do a validity check by checking the value of each array element.

Both examples use the input field, but this does not mean that this element can only be accessed through the document object and its methods. Listing C first takes the data entered into the input field and then puts it into a segment element. When the user selects the submit button, the segment element is submitted.

Another way

I don't want to leave out what is probably the most common way to access elements, especially for data contained in a page form. This method traverses the DOM tree to search for an element, and then accesses or manipulates it or their contents. The visual chart of the page can provide a good visual source, but a quick glance at the source code of the page can provide us with a sample information. For example, suppose we need to access the input field named txtAddress on the page of listing D. We can follow the steps below to iterate through HTML's DOM to search for the elements we want.

We start at the top of the page, so we can start with the document object.

The body of the page and the * * elements in the document object are forms.

After entering the form element, we can find the address field.

So far, we have found the element we want. So, we start with the document object, then we go to the form, and then we end with the input element called address. The HTML form is contained in the form properties of the document object. It returns an array of forms on the page, so we can access each form by an index value (starting at 0). You can also access the form using the name of the form as an attribute of the document object. The following example uses the * method to access address elements and their values.

Document.forms [0] .address.value

Alternatively, you can access it using the actual form name (specified in the name attribute of the form element). As follows:

Document.frmTest.address.value

I modified * * examples in listing E to use this method to access page elements and their values for validation.

Get what you need.

DOM provides all the requirements for accessing the content of an HTML page. It can not only be used to access and manipulate the data of elements, but also to accomplish more functions.

Thank you for your reading, the above is the content of "how JavaScript uses DOM to achieve data access". After the study of this article, I believe you have a deeper understanding of how JavaScript uses DOM to achieve data access, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.