Simplified Dom tutorial

Let's look at a simple document tree.

Obviously, the top-level node of the tree is a nodea node. Next, you can move the node to any point in the tree by specifying the appropriate node. In combination with the following code, you can better understand the relationship between nodes in the tree:
Nodea. firstchild = nodea1
Nodea. lastchild = nodea3
Nodea. childnodes. Length = 3
Nodea. childnodes [0] = nodea1
Nodea. childnodes [1] = nodea2
Nodea. childnodes [2] = nodea3
Nodea1.parentnode = nodea
Nodea1.nextsibling = nodea2
Nodea3.prevsibling = nodea2
Nodea3.nextsibling = NULL
Nodea. lastchild. firstchild = nodea3a
Nodea3b. parentnode. parentnode = nodea

Dom definition provides practical methods for operating the node Structure of a document object. It provides common methods such as executing object insertion, update, deletion, and cloning.
Insertbefore ()-Insert a new subnode before referring to the subnode. If the subnode referenced is null, the new subnode is inserted as the last subnode of the call node.
ReplaceChild () -- replace oldchild with the specified newchild in the childnodes set. If the replacement is successful, oldchild is returned. If newchild is null, you only need to delete oldchild.
Removechild () -- deletes the node specified by removechild from the node's childnodes set. If the node is deleted successfully, the deleted child node is returned.
Appendchild () -- Add a new node to the end of the childnodes set. If yes, the new node is returned.
Clonenode () -- creates a new and replicated node. If the input parameter is true, the child node is also copied. If the node is an element, the corresponding attributes are also copied, return the new node.

To access or create a new node in a document tree, you can use the following methods:
Getelementbyid ()
Getelementsbytagname ()
Createelement ()
Createattribute ()
Createtextnode ()
Note: There is only one document object on a page. Except getelementsbytagname (), other methods can only be called through document. methodname.

let's look at the following example:

This is a sample paragraph.

the result is displayed as "P ", below are some explanations
document.doc umentelement-gives the page's HTML Tag.
lastchild-gives the body tag.
firstchild-gives the first element in the body.
tagname-gives that element's tag name, "P" in this case.
another one:

<P> This is a sample paragraph. </P>
<Script language = "JavaScript">
<! --
Alert(document.doc umentelement. lastchild. firstchild. tagname );
// -->
</SCRIPT>
</Body>
</Html>
There is no big difference between this example and the above. It is just an empty row, but in NS, a node is automatically added to the empty row, so the returned value is "undefined ", in ie, the null rows will be skipped and still point to the P tag.

More common methods:
<P id = "myparagraph"> This is a sample paragraph. </P>
...
Alert (document. getelementbyid ("myparagraph"). tagname );
In this method, you do not need to care about where the node is located in the document tree, but you only need to ensure that its ID number is unique on the page.

The next method to access the element node is document. getelementsbytagname (). The returned value is an array. For example, you can use the following example to change the connection of the entire page:
VaR nodelist = Document. getelementsbytagname ("");
For (VAR I = 0; I <nodelist. length; I)
Nodelist [I]. style. color = "# ff0000 ";

attribute and attributes
attribute objects are related to elements, but are not considered part of the document tree. Therefore, attributes cannot be used as part of a subnode set.
there are three ways to create new attributes for an element
1.
var ATTR = document. createattribute ("myattribute");
ATTR. value = "myvalue";
var El = document. getelementbyid ("myparagraph");
el. setattributenode (ATTR);
2.
var El = document. getelementbyid ("myparagraph");
el. setattribute ("myattribute", "myvalue");
3.
var El = document. getelementbyid ("myparagraph");
el. myattribute = "myvalue";
you can customize Attributes:

This is a sample paragraph.

...
alert (document. getelementbyid ("myparagraph "). getattribute ("myattribute");
the returned value is "myvalue ". however, you must use getattribute instead of attributename, because some Browsers Do not support custom attributes.

attributes can also be easily deleted from an element. You can use removeattribute () or point element. attributename to a null value.
with attributes, we can produce some dynamic results:

text in a paragraph element.

... code for the links...
document. getelementbyid ('sample1 '). setattribute ('align ', 'left');
document. getelementbyid ('sample1 '). setattribute ('align ', 'right');
another type:

text in a paragraph
element.

... code for the links...
document. getele Mentbyid ('sample2 '). style. textalign = 'left';
document. getelementbyid ('sample2 '). style. textalign = 'right';
similar to the preceding example, it shows that you can use elements to modify attributes in a style, or even attributes in a class. the only thing that needs to be mentioned is that textalign evolved from text-align in the style and has a basic rule, that is, if the attribute in the style appears, it will be removed in the Dom and the subsequent letter will be changed to uppercase. Another point is that even if the element does not have the style attribute, the above example can also be used.

text nodes:
let's take a look at the example:

This is the initial text.

... code for the links...
document. getelementbyid ('sample1 '). firstchild. nodevalue =
'once upon a time... ';
document. getelementbyid ('sample1 '). firstchild. nodevalue =
'... in a galaxy far, far away ';
first, text nodes does not have the ID attribute as elements does. getelementbyid () or document. getelementsbytagname () Access
The following structure may be more clear:
you can see that the document. getelementbyid ('sample1 '). firstchild. nodevalue can be used to read or set the value of text nodes.

another more complex example:

This is the initial text.

its document structure
here we use document. getelementbyid ('sample1 '). firstchild. nodevalue only changes "this is the"
and initial text. will not change. here we should see that it is different from innerhtml. of course, you can also use it like this:
document. getelementbyid ('sample3 '). firstchild. nodevalue =
' once upon a time... ';
document. getelementbyid ('sample3 '). firstchild. nodevalue =
'... in A galaxy Far, Far Away ';
the HTML code will not be interpreted, and the browser will regard them as common text for display.

Create and delete text nodes:
var mytextnode = document. createtextnode ("My text");
using the Code above, you can create a new text node, but it is not part of the document tree. to display it on the page, you must make it a child of a node in the Document Tree, because
text nodes cannot have a son, therefore, you cannot add it to a text nodes. attribute does not belong to any part of the document tree, nor does this path. Now only elements nodes are left.
, the following example shows how to add and delete a text node:

initial text within a paragraph element.

... code to add a te XT node...
var text = document. createtextnode ("new text" (counter1);
var El = document. getelementbyid ("sample1");
el. appendchild (text);
... code to remove the last child node...
var El = document. getelementbyid ("sample1");
If (El. haschildnodes ()
el. removechild (El. lastchild);
it is easy to add text. The code above creates a new text node and adds it to the end of the childnodes array through the appendchild () method, and set a global variable of counter1, which is helpful Observe that the returned value of
haschildnodes () is true or false. It is used to determine whether the current node has a child, so as to prevent the removechild () call when there is no child.

creating element nodes
with the above basics, it should be easier to understand, first, let's look at the following code

This text is in a div element.

... code for the link...
var parael, boldel;
parael = document. createelement ("p");
boldel = document. createelement ("B");
parael. appendchild (document. createtextnode ("this is a new paragraph with");
boldel. appendchild (document. createtextnode ("bold");
parael. appendchild (boldel);
parael. appendchild (document. createtextnode ("text added to the DIV");
document. getelementbyid ("sample1 "). appendchild (parael);
You can also directly set attribute for the newly added element nodes. either of the following can be:
boldel. style. color = "# FFFF00";
parael. appendchild (boldel);
or:
parael. appendchild (boldel);
boldel. style. color = "# FFFF00";