对于ol标签下有li标签
常用写法(返回子元素):
子节点第一个元素: ol.children[0]
子节点最后一个元素: ol.children[ol.children.length - 1]
不常用写法(返回文本/元素节点):
第一个子节点: ol.firstChild
最后一个子节点: ol.lastChild
不常用写法(返回子元素IE9+):
子节点第一个元素 ol.firstElementChild
子节点最后一个元素: ol.lastElementChild
//html代码 <ol> <li>2020</li> <li>2021</li> <li>2022</li> </ol> //js代码 var ol = document.querySelector('ol') // 1.firstChild 第一个子节点 不管是文本还是元素节点 console.log(ol.firstChild); //#text console.log(ol.lastChild); //#text // 2.firstElementChild 返回第一个子元素节点 IE9+ console.log(ol.firstElementChild); //<li>2020</li> console.log(ol.lastElementChild); //<li>2022</li> // 3.实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); //<li>2020</li> console.log(ol.children[ol.children.length - 1]); //<li>2022</li>
一般都使用 ol.children[0] 和 ol.children[ol.children.length - 1] 利用数组地址的方式获取子节点第一个和最后一个元素.
不积跬步无以至千里 不积小流无以成江海