原生js获取第一个和最后一个子元素并处理firstElementChild、lastElementChild浏览器兼容性问题

<div id="box">
	<div>第一个块元素</div>
	<ul>
		<li>列表</li>
	</ul>
	<span>文字说明</span>
</div>

ul li {
	list-style: none;
}

var box = document.getElementById('box');
console.log(box.firstChild);  // #text 文本节点 换行
console.log(box.lastChild);  // #text 文本节点 换行
// https://developer.mozilla.org/zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild
// firstElementChild、lastElementChild 有兼容性问题
// console.log(box.firstElementChild); // <div>第一个块元素</div>
// console.log(box.lastElementChild); // <span>文字说明</span>

var firstEle = getFirstElementChild(box);
console.log(firstEle); // <div>第一个块元素</div>
var lastEle = getLastElementChild(box);
console.log(lastEle); // <span>文字说明</span>

// 替代firstElementChild 处理浏览器兼容性问题
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}
// 替代lastElementChild 处理浏览器兼容性问题
function getLastElementChild(element) {
    var node, nodes = element.childNodes, i = nodes.length - 1;
    while (node = nodes[i--]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

标签：node,box,console,log,lastElementChild,firstElementChild,兼容性问题,var
来源： https://blog.csdn.net/u010234868/article/details/118002703