The firstchild,lastchild,nextsibling,previoussibling of Javascript--dom

element. FirstChild: Read-only property the first child node
Standard: FirstChild will contain the text type of the node
Non-standard: contains only ELEMENT nodes
element. Firstelementchild: Gets the child nodes of the first element type under the read-only property standard

Compatible with standard and non-standard browser notation:

HTML code:

<ulID= "UL1">        <Li>11111</Li>        <Li>22222</Li>        <Li>33333</Li>        <Li>44444</Li>        <Li>55555</Li>    </ul>

JS Code:

Window.onload = function () {
var Oul = document.getElementById (' ul1 ');
 alert (oul.firstchild); // alert (oul.firstelementchild);　　

If(oul.firstelementchild) {   oUl.firstElementChild.style.color = ' red ';　　}else{   oUl.firstChild.style.color = ' red '; }
};

Firstchild,lastchild,nextsibling,previoussibling, the following is the second notation:

function () {  var oul = document.getElementById (' ul1 ');

/*
element. firstchild | | element. Firstelementchild Last child node
*/
var Ofirst = Oul.firstelementchild | | Oul.firstchild;
OFirst.style.color = ' red ';

/*
element. LastChild | | element. Lastelementchild Last child node
*/

var olast = Oul.lastelementchild | | Oul.lastchild;
OLast.style.color = ' green ';

/*
element. nextSibling | | Element. Nextelementsibling Next Sibling node
*/
var onext = ofirst.nextelementsibling | | ofirst.nextsibling;
ONext.style.color = ' Blue ';

/*
element. previoussibling | | element. previouselementsibling Previous Sibling node
*/
var Oprev = olast.previouselementsibling | | olast.previoussibling;
OPrev.style.color = ' orange ';

Next sibling node (and the third byte Point under UL)
var other = Onext.nextelementsibling | | onext.nextsibling;
OTher.style.color = ' Purple ';

};

Javascript--dom firstchild,lastchild,nextsibling,previoussibling