| <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> node relationship </title> <Script type = "text/javascript"> Function Demo (){ Var divObj = document. getElementById ("divDemo "); // Obtain the parent node Var parentNode = divObj. parentNode; // DisplayNodeInfo (parentNode ); // Obtain the subnode Var childNodes = divObj. childNodes; // The subnode returns a set, that is, an array. // Alert (childNodes. length); // displays the number of nodes. // DisplayNodeInfo (childNodes [0]); // Obtain the sibling Node // ---------- Obtain the previous sibling Node Var preBrotherNode = divObj. previussibling. previussibling; // When empty rows exist between labels, a blank text node will appear. Be sure to pay attention when obtaining nodes. // DisplayNodeInfo (preBrotherNode ); // ---------- Get the next sibling Node Var nextBrotherNode = divObj. nextSibling; DisplayNodeInfo (nextBrotherNode ); } Function displayNodeInfo (node ){ Alert ("Name:" + node. nodeName + ", Type:" + node. nodeType + ", Value:" + node. nodeValue ); } </Script> </Head> <Body> <Input type = "button" value = "test" onclick = "Demo ()"/> <Div id = "divDemo"> div content </div> <Table> <Tr> <Td> cell 1 </td> <Td> Cell 2 </td> </Tr> <Tr> <Td> cell 3 </td> <Td> cell 4 </td> </Tr> </Table> </Body> </Html> |