标签：node box console log lastElementChild firstElementChild 兼容性问题 var

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。