function getNextElement(node) { if (node.nodeType == 1) return node; if (node.nextSibling) return getNextElement(node.nextSibling); return null; }
关于浏览器对于换行符等理解成文本节点的问题，这个文章有详细讲解 浏览器对换行符理解成文本节点的原因研究
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>javascript获取某节点下最后一个子元素节点 和 第一个子元素节点</title> </head> <body> <p> 0 <em>aaa</em> <em>bbb</em> </p> <script> //通过通配符获取到P元素节点下所有的元素节点，然后把节点数组长度-1，就是数组中最后一个数组元素的下标，由此可以得到最后一个元素节点 var txt = document.getElementsByTagName("p")[0]; var alle = txt.getElementsByTagName("*"); //最后一个子元素节点 alert(alle[alle.length-1].nodeName); //第一个子元素节点 alert(alle[0].nodeName); //lastChild可以获取某节点下的最后一个节点，但是并不一定是元素节点，可能是文本节点，例如上面的html代码中</em>和</p>之间因为换行符而被浏览器理解成一个文本节点 var e = txt.lastChild; alert(e.nodeName); //firstChild可以获取某节点下的第一个节点，但是并不一定是元素节点，可能是文本节点，例如上面的html代码中<p>和<em>之间的0 var ee = txt.firstChild; alert(ee.nodeName); </script> </body> </html>
DOM Core 提供了 lastChild 方法可以让我们获取某个节点下的最后一个节点，但是这个节点有可能不是元素节点，有可能是文本节点，因为有的浏览器可能会把换行符解释为一个文本节点，那么我们用 lastChild 就得不到我们想要的最后一个元素节点。上面提供的方法可以获取到。
总结：
childNodes 可以获取某节点下的所有子节点，但是也包括文本节点，比如换行符就是文本节点
而 getElementsByTagName("*") 则可以获取某节点下的所有子元素节点，不包括文本节点，然后把子元素节点数组的长度-1就得到了最后一个子元素节点
同理，用子元素节点数组下标为0的那个可以获取到第一个子元素节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>javascript获取某节点后下一个兄弟元素节点</title> </head> <body> <p id="txt"> <em>aaa</em> </p> test <p> <em>bbb</em> </p> <script> function getNextElement(node){ if(node.nodeType == 1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; } var txt = document.getElementById("txt"); var sib = getNextElement(txt.nextSibling); alert(sib.nodeName); alert(txt.nextSibling.nodeName); </script> </body> </html>
DOM Core 提供了 nextSibling 方法可以让我们获取某个节点的下个兄弟节点，但是也有可能这不是个元素节点，是个文本节点，上面提供了一个可以直接获取下个兄弟元素节点的函数
总结：
nextSibling 可以获取某节点下个兄弟节点，但是也可能是文本节点
而 getNextElement(node) 函数则可以获取某节点的下个兄弟元素节点，不包括文本节点，原理就是通过对比节点类型，1 是元素节点 2 是属性节点 3是文本节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>javascript获取某节点上一个兄弟元素节点</title> </head> <body> <p> <em>aaa</em> </p> test <p id="txt"> <em>bbb</em> </p> <script> function getPrevElement(node){ if(node.nodeType == 1){ return node; } if(node.previousSibling){ return getPrevElement(node.previousSibling); } return null; } var txt = document.getElementById("txt"); var sib = getPrevElement(txt.previousSibling); alert(sib.nodeName); alert(txt.previousSibling.nodeName); </script> </body> </html>
根据 getNextElement(node) 可以很容易的就写出获取上一个兄弟元素节点的函数 getPrevElement(node)