js 节点的兼容

最新推荐文章于 2021-10-12 20:00:00 发布

原创最新推荐文章于 2021-10-12 20:00:00 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #节点兼容

js 专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>

</head>
<body>
<ul id="uu">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script>
function my$(idName){
return document.getElementById(idName);
}

//第一个节点和第一个元素的获取的代码在IE8可能不支持

//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.nodeType != 1 && node) {
node = node.nextSibling;
}
}
return node;
}

//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild) { //true-->支持
return element.lastElementChild;
}
else {
node = element.lastChild;
while(node && node.nodeType != 1) {
node = node.previousSibling;
}
}
return node;
}

console.log(getLastElementChild(my$('uu')));
</script>
</body>
</html>