[Translation] JavaScript Study Notes (2)-dom

HTML dom

Image flip Effect Onmouseover = "this.src+'button_over.gif ';"
Onmousedown = "this.src+'button_down.gif ';"
Onmouseout = "this.src+'button_off.gif ';"
Onmouseup = "this.src?'button_over.gif ';">

Dynamically add and remove contacts on the page

VaR inputs = 0;
 
Function addcontact (){
VaR table = Document. getelementbyid ('contacts ');

VaR TR = Document. createelement ('tr ');
VaR TD1 = Document. createelement ('td ');
VaR td2 = Document. createelement ('td ');
VaR td3 = Document. createelement ('td ');
VaR inp1 = Document. createelement ('input ');
VaR inp2 = Document. createelement ('input ');

If (inputs> 0 ){
VaR IMG = Document. createelement ('img ');
IMG. setattribute ('src', 'delete.gif ');
IMG. onclick = function (){
Removecontact (TR );
}
Td1.appendchild (IMG );
}

Inp1.setattribute ("name", "name" + inputs );
// Same as element. Name = "elementname"
Inp2.setattribute ("name", "email" + inputs );

Table. appendchild (TR );
Tr. appendchild (TD1 );
Tr. appendchild (td2 );
Tr. appendchild (td3 );
Td2.appendchild (inp1 );
Td3.appendchild (inp2 );

Inputs ++;
}
Function removecontact (TR ){
Tr. parentnode. removechild (TR );
}

<Table>
<Tbody id = "contacts">
<Tr>
<TD colspan = "3"> <a href = "javascript: addcontact ();"> Add a contact </a> </TD>
</Tr>
<Tr>
<TD> </TD>
<TD> name </TD>
<TD> email </TD>
</Tr>
</Tbody>
</Table>

We can use childnodes to access the child element. childnodes returns the child element array of the current element. It can also be accessed using the firstchild and lastchild attributes.

Set alternate colors for table rows Function setcolors (tbody, color1, color2 ){
VaR colors = [color1, color2];
VaR counter = 0;
VaR TR = tbody. firstchild;

While (TR ){
Tr. style. backgroundcolor = colors [counter ++ % 2];
Tr = tr. nextsibling;
// Returns the next element in the Dom with the same parent as the current element.
}
}

Function setcolors (tbody, color1, color2 ){
VaR colors = [color1, color2];

For (VAR I = 0; I <tbody. childnodes. length; I ++ ){
Tbody. childnodes [I]. style. backgroundcolor = colors [I % 2];
}
}

Function setcolors (tbody, color1, color2 ){
VaR colors = [color1, color2];
VaR TRS = tbody. getelementsbytagname ('tr ');

For (VAR I = 0; I <TRS. length; I ++ ){
TRS [I]. style. backgroundcolor = colors [I % 2];
}
}

Getelementsbytagname: returns an array containing all elements with the same tag name.

Process text
Each segment of text on the page is compressed into a hidden # text node <Div id = "ourtest"> This is <a href = "link.html"> A link </a> and an image: </div>

There are four root elements, one text node "this is", one node with a subnode Value of "A link", and another text node "and an image:" One Image Element
Change "and an image:" Value Document. getelementbyid ('ourtest'). childnodes [2]. nodevalue = 'ur new text ';

Access the "A link" Value Document. getelementbyid ("ourtest"). childnodes [1]. childnodes [0]. nodevalue;

Add new text content to Div VaR newtext = Document. createtextnode ('ur new text ');
VaR ourdiv = Document. getelementsbyid ('ourtest ');
Ourdiv. insertbefore (newtext, ourdiv. childnodes [1]);

Insertbefore receives two parameters: the element to be added and the existing element Add the element to the front of the existing element created by jecray