<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <div>这是一个广告图片</div> <ul> <li>这是一个列表</li> </ul> <span>说明性文字</span> </div> <script> // box.firstChild 获取第一个子节点 // box.firstElementChild 获取第一个子元素， 有兼容性问题，从IE9以后支持 // // box.lastChild 获取最后一个子节点 // box.lastElementChild 获取最后一个子元素， 有兼容性问题，从IE9以后支持 var box = document.getElementById('box'); // console.log(box.firstChild); // console.log(box.firstElementChild); var ele = getFirstElementChild(box); console.log(ele); // 处理浏览器兼容性 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } </script> </body> </html>