2.2.3 Document Object Model DOM and Form

2.2.3 Document Object Model DOM and Form

What is the purpose of the document object model DOM? Let's start with a tree. Below is a tree, composed of roots, branches, and leaves. Any leaf node can be accessed through the root.

    For an html document, it can be compared to a tree, as shown in the figure below. Through the root, you can access each label and modify its attributes. The root is the document object, and various tags are found through various methods (such as getElementByID).

(The picture comes from the Internet)

The Document Object Model (DOM) implements operations such as adding, deleting, and modifying web page elements (tags) through JavaScript. DOM provides a large number of functions to manipulate HTML documents, such as the function getElementByID. The id of the tag is the unique identifier of the HTML element (just like the ID number of a person, the id of the tag is the unique identifier in html). In js, the element can be obtained through the document function getElementByID, so that the tag element can be manipulated . For example, get the drawing environment context of the canvas element that can be used for drawing:

1. functionGetCanvasContext(canvasID){

2. var theCanvas = document.getElementById(canvasID);//Get the label element whose id is canvasID

3. return theCanvas.getContext("2d");//call the element function and return the result of the call


Another example is to modify the page title through js:

1. document.title="thisTitle";

Here is a brief introduction to the form:

    There is a special kind of tags in HTML tags: forms, which are used for explicit controls to enable web pages to interact. The following code defines the form, which contains two numeric input boxes and a button:

1. <div style="width:500px; height:auto; float:left;display:inline">

2. <form id="formA" width="500" height="400">

3. Set calculation parameters: <br/>

4. Time step: <input type="number" id="timeStep" min="1" max="100" step=0.01 value="1"/><br/>

5. Calculation time: <input type="number" id="during" min="1" max="1000" step=0.01 value="120"/><br/>

6. Submit: <input type="button" value="solve" onclick="main()"/>

7. </form>

8. </div>

The explicit results of running are as follows:

How to get the parameters entered by the user in the web script? The button in the form defines the onclick attribute, indicating that the main() function will be called after clicking, and the main function will get user input, as follows:

1.//Acquire the content of the text input box according to the id and convert it to plastic

2. functionGetInputNumber(id){

3. var numberInput = document.getElementById(id);//Get the control

4. var v=numberInput.value;//Get visible attributes

5. return parseInt(v);//Convert to plastic


7.//Program entry

8. function main (){

9. var timeStep=GetInputNumber("timeStep")/1000;//Get the time step

10. var during=GetInputNumber("during");//Get the solution time

11. console.log(timeStep,during);


Reference: https://cloud.tencent.com/developer/article/1177733 2.2.3 Document Object Model DOM and Forms-Cloud + Community-Tencent Cloud