获取元素节点

1.父元素.firstChild与父元素.lastChild

// let ol = document.querySelector('ol')
//  .firstChild:获取的是第一个子节点，找不到则返回null，同样也是包含所有的节点
//  .lastChlid：获取的是最后一个子节点
<ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ol>
//firstChlid 第一个子节点，·不管是文本节点还剩元素节点，此时打印出的结果是文本节点
//console.log(ol.firstChlid);
console.log(ol.lastChlid);//这个也一样

2.父元素.firstElementChild与父元素.lastElementChild

// let ol = document.querySelector('ol')
//  .firstElementChild:获取的是第一个子元素节点
//  .lastElementChlid：获取的是最后一个子元素节点
<ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ol>
//firstElemenChlid 第一个子元素节点
//console.log(ol.firstElementChlid);
console.log(ol.lastElementChlid);//最后一个子元素节点

父元素.firstElementChild与父元素.lastElementChild,这两种方法有兼容性问题，IE9以上才支持

3.父元素.children,没有兼容问题又获取第一个子元素

// let ol = document.querySelector('ol')

<ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ol>
//console.log(ol.children[索引])
console.log(ol.children[0])//第一个子元素
console.log(ol.children[ol.childred.length - 1])/最后一个子元素