JavaScript and DOM for easy data access (1)

Do you know how to access data through JavaScript and DOM? Here we will give you a brief introduction. First, let's take a look at the concept of html dom. According to W3C introduction, "the DOM Document Object Model is a language-neutral interface platform that allows programs and scripts to dynamically access and update document content, structures, and styles."

Access data through JavaScript and DOM

Accessing and processing different elements on a Web page is a regular task, which can be easily achieved by using javaScript and HTML document object models (DOM. This article describes how to access page elements and how to implement them.

HTML DOM

According to W3C introduction, "the Document Object Model is a language-neutral interface platform that allows programs and scripts to dynamically access and update document content, structures, and styles ."

All HTML elements and their text and attributes can be accessed through DOM. The content of an element can be modified, deleted, and created.

When using DOM and page elements, the most important object is the document. It is included in windows objects, but you can directly type and use the document in JavaScript code. When used to access all elements in a page, it represents the entire HTML document. You can access page elements through collections, attributes, and methods. This article describes the field elements used to access web pages through various methods.

Access Data

When operating on pages and their data, you often need to access an element and data-related information. You can use the following method to access each page Element Through DOM and JavaScript:

GetElementById (): returns a reference to the first object with the specified id passed to this method.

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

GetElementsByTagName (): returns a set of objects with the specified tag name passed to this method.

List A contains A simple example that uses the first two methods listed above. It contains a form with two data fields. before submitting a document, you must enter data for the two data fields. The getElementById method is used to access the first data field by passing an appropriate id, for example, assigning the value to the input field through the ID attribute. The getElementsByName method accesses the second data field by assigning the value of the name attribute. This method returns an array value, so I only care about the first value, for example, element value with a subscript index of 0 in the array ).

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

 
 

  
  
varcolumns=document.getElementsByTagName("td");  
  
  
 
 
 

For our example, I am interested in the input field on the form. List B replaces the previous example with the getElementsByTagName method to compare it with the other two methods. We check the validity of each array element by checking its values.

Both examples use the input field, but it does not mean that this element can only be accessed through the document object and its method. List C first obtains the data input to the input field, and then puts it into a segment element. When you select the submit button, the segment element is submitted.