[JavaScript] DOM Operation Technology

1. Dynamic scripts
You can use the <script> element to insert JavaScript code into the page. One method is to include an external file through the src attribute, and the other is to use this element to include the code. Dynamic scripts are the scripts that do not exist during page loading but will be dynamically added by modifying the DOM at some time in the future.
The dynamically loaded external JavaScript text can be executed immediately, for example:
<Script type = "text/javascript" src = "test. js"> </script>
The DOM code for creating this node is as follows:
Var script = document. createElement ("Script ");
Script. type = "text/javascript ";
Script. src = "test. js ";
Document. body. appendChild (script );
Another way to specify JavaScript code is in-row mode, for example:
<Script type = "text/javascript">
Function myfunc (){
Alert ("Hello World! ");
}
</Script>
The created DOM code is as follows:
Var script = document. createElement ("script ");
Script. type = "text/javascript ";
Script. text = "function myfunc () {alert ('Hello World! ');}";
Document. body. appendChild (script );
 
2. Dynamic Style
The CSS style contains two elements in the HTML page. The <link> element is used to contain files from external sources, and the <style> element is used to specify the embedded style. Similar to a dynamic script, a dynamic style is a style that does not exist when the page is loaded. It is dynamically added to the page after the page is loaded.
For example:
<Link rel = "stylesheet" type = "text/css" href = "test.css">
You can use DOM code to dynamically create this element, as shown below:
Var link = document. createElement ("link ");
Link. rel = "stylesheet ";
Link. type = "text/css ";
Link. href = "test.css ";
Var head = document. getElementsByTagName ("head") [0];
Head. appendChild (link );
Another way to define a style is to use the <style> element to include CSS, for example:
<Style type = "text/css">
Body {
Background-color: red;
}
</Style>
The corresponding DOM code is as follows:
Var style = document. createElement ("style ");
Style. type = "text/css ";
Try {
Style. appendChild (document. createTextNode (
"Body {background-color: red }"));
}
Catch (ex ){
Style.styleSheet.css Text = "body {background-color: red }";
}
Var head = document. getElementsByTagName ("head") [0];
Head. appendChild (style );
 
3. operation table
To facilitate table creation, html dom also adds some attributes and methods to the <table>, <tbody>, and <tr> elements.
The attributes and methods added to the <table> element are as follows:
1) caption: Save the pointer to the <caption> element.
2) tBodies: it is an HTMLCollection of <tbody> elements.
3) tFoot: saves the pointer to the <tfoot> element.
4) tHead: saves the pointer to the <thead> element.
5) rows: HTMLCollection of all rows in the table.
6) createTHead (): Creates the <thead> element and returns a reference.
7) createTFoot (): Creates a <tfoot> element and returns a reference.
8) createCaption (): Creates a <caption> element and returns a reference.
9) deleteTHead (): deletes the <thead> element.
10) deleteTFoot (): deletes the <tfoot> element.
11) deleteCaption (): deletes the <caption> element.
12) deleteRow (pos): deletes rows at the specified position.
13) insertRow (pos): Insert a row to the specified position in the rows set.
The attributes and Methods Added for <tbody> are as follows:
1) rows: saves the HTMLCollection of the row in the <tbody> element.
2) deleteRow (pos): delete rows at the specified position.
3) insertRow (pos): inserts a row into the specified position in the rows set.
The attributes and methods added to the <tr> element are as follows:
1) cells: Save the HTMLCollection of cells in the <tr> element.
2) deleteCell (pos): delete a cell at a specified position.
3) insertCell (pos): To cells