childnodes和children的区别在哪里?
下面我就随便举一个例子来比较一下吧:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function(){ var oUl = document.getElementById("list"); var childNodesLen = oUl.childNodes.length; var childrenLen = oUl.children.length; alert("childNodes的长度是:"+childNodesLen+"\n"+"children的长度是:"+childrenLen); } </script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
浏览器预览效果如下:
下面我来分析一下:
children.length获取的是元素节点的长度,很明显返回结果是3,这个肯定是没啥疑问的。
childNodes.length获取的是子节点的长度,返回结果为啥是7呢?
实际上对于ul元素来讲,childNodes包含3个子元素节点和4个子文本节点。
我们不难发现,每一个li元素都处在不同行,每一个换行符都是一个空白节点,javascript会把这些空白节点当成文本节点来处理。
我们数一下就知道是4个换行符,因为每一个换行符都是一个空白节点,那就是4个子文本节点啦。