<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="uu"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>四五个</li> </ul> <script src="common.js"></script> <script> //element.firstChild--->谷歌火狐获取的是第一个子节点 //element.firstChild--->IE8获取的是第一个子元素 //element.firstElementChild--->谷歌和火狐获取的是第一个子元素,IE8不支持 //获取任意一个父级元素的第一个子级元素 function getFirstElementChild(element) { if (element.firstElementChild) {//true 支持 return element.firstElementChild; } else { var node = element.firstChild;//第一个子节点 while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } } //获取任意一个父级元素的最后一个子级元素 function getLastElementChild(element) { if (element.lastElementChild) { return element.lastElementChild; } else { var node = element.lastChild; while (node && node.nodeType != 1) { node = node.previousSibling; } return node; } } //测试 console.log(getFirstElementChild(my$("uu")).innerText); console.log(getLastElementChild(my$("uu")).innerText); </script> </body> </html>