/* 高版本的浏览器可以识别
firstElementChild和firstChild的区别是 忽略空格和换行直接获取元素节点
中间带Element的选择节点属性也是忽略空格和换行直接获取元素节点*/
let div = document.querySelector('div')
/* firstElementChild 返回节点的第一个子节点 */
/* lastElementChild 返回节点的最后一个子节点 */
/* nextElementSibling 下一个节点 */
/* console.log(div.firstElementChild.nextElementSibling) */
/* previousElementSibling 上一个节点 */
/* console.log(div.lastElementChild.previousElementSibling) */
/* 老的浏览器也可以用 比如ie6 7 */
/* 获得 div元素 通过使用firstChild 和 nextSibling */
/* 的方式 把ul的color 属性变成 红色 */
// let div = document.querySelector('div')
// console.log(div.childNodes)
// div.firstChild.nextSibling.nextSibling.nextSibling.style.color = 'red'
// /* 获得 div元素 通过使用lastChild 和 previousSibling */
// /* 的方式 把h2的font-size属性变成 50px*/
// div.lastChild.previousSibling.style.fontSize = '50px'
/* firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 */
// let div = document.querySelector('div')
// console.log( div.firstChild )
/* lastChild 返回节点的最后一个子节点 */
// let div = document.querySelector('div')
// console.log( div.lastChild )
/* nextSibling 下一个节点 */
// let div = document.querySelector('div')
// console.log( div.firstChild.nextSibling )
/* previousSibling 上一个节点 */
/* let div = document.querySelector('div')
console.log( div.lastChild.previousSibling ) */
/* childNodes 返回子节点集合，childNodes[i] */
/* 只返回子节点 如果存在空格或者换行 也会被算成一个子节点 */
// let div = document.querySelector('div')
// let c = div.childNodes
// console.log(c)
// c[1].style.background = 'red'
// c[1].style.fontSize = '20px'
// c[3].style.background = 'green'
// c[5].style.width = '200px'
// c[5].style.height = '100px'
// c[5].style.background = 'blue'
/*
选择器 选择到 div
通过div 来找到h1 把h1改成背景是红色 字体大小变成20px
通过div 来找到ul 把ul改成背景是绿色
通过div 来找到h2 把h2的宽度变成200px 高度变成100px
背景色改成蓝色
*/
// let li = document.querySelector('li')
// /* parentNode 返回节点的父节点 */
// console.log(li.parentNode)
/* 选择器 选择到li 通过查找父节点的方式 把他的父节点
background变成红色 */
// li.parentNode.style.width = '100px'
// li.parentNode.style.height = '100px'
// li.parentNode.style.background = 'red'
