Record the knowledge points encountered in learning JavaScript
1, when using nextsibling to get UL under the second node ID of three Li tags, found that IE10, Chrome does not ignore the line break, Space and TAB key.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>JavaScript exercises.</title> </Head> <Body> <H1>This is my first exercise.</H1> <ul> <LiID= "Item1">Item1</Li> <LiID= "Item2">Item2</Li> <LiID= "Item3">Item3</Li> </ul> </Body></HTML><ScriptTyoe= "Text/javascript"> varNodeitem=document.getElementById ("item1"); alert (nodeitem.id); alert (NodeItem.nextSibling.nodeType); Alert (document.getElementsByTagName ("ul")[0].childnodes.length);</Script>View Code
IE10, chrome running results are: item1,3,7. That is ("Item1"). Nextsibling.nodetype=3 is a text type node, which means that there is no empty space behind the node "item1" (spaces, carriage returns, and TAB keys). There are 4 lines in the <ul></ul> tag, 3 <li></li> nodes, and a total of 7.
Then delete the line breaks in the <ul></ul> tab, and the result in Ie10, Chrome, is: item1,1,3.
2. Change policy now use the function Getnextnode (node) to get the next element node to ignore line breaks, spaces, and tab keys.
<ScriptTyoe= "Text/javascript">//Get Node ID functionGetnextnode (node) {node=typeofnode=="string" ?document.getElementById (node): node; varNextNode=node.nextsibling; if(!nextnode)return NULL; while(true){ //access to the next element node if(Nextnode.nodetype==1){ Break; } Else{ //access to non-element type nodes if(nextnode.nextsibling) {NextNode=nextnode.nextsibling; } Else{ Break; } } } returnNextNode; } varNextNode=Getnextnode ("item1"); alert (nextnode.id); varNodeitem=document.getElementById ("item1"); alert (nodeItem.nextSibling.id);</Script>View Code
IE10, chrome running results are: item2,undefined. function Getnextnode (node), as desired, obtains the next element node of "item1" correctly, the network saying is (I did not test): IE8.0 and the following versions of the browser will ignore the gap between nodes, the Web browser (Chrome, FireFox, Safari, and so on) will treat these blanks as text nodes.
IE10, Chrome and NextSibling
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
