节点属性
<div>
<h1>我是h1</h1>
<ul>
<li>我是Li</li>
</ul>
<h2>我是h2</h2>
</div>
<script>
/* let a =document.querySelector('li')
console.log(a.parentNode); */
/* parentNode 返回节点的父节点 */
/* a.parentNode.style.width='200px'
a.parentNode.style.height='200px'
a.parentNode.style.background='red' */
/* childNodes 返回子节点集合，childNodes[i] */
/* 只返回子节点 如果存在空格或者换行，也会被算成一个子节点 */
/* let div=document.querySelector('div') */
/*返回子节点集合,通过下标可以获得ul */
/* console.log(div.childNodes[3]); */
/* 高版本兼容识别 */
/* firstElementchild 返回节点的第一个子节点 */
/* lastElementChild 返回节点的最后一个子节点*/
/* nextElementSibling 下一个节点*/
/* previousElementSibling 上一个节点*/
/* 带Element的☆和老版本的区别是忽略空格和换行直接获取元素节点 */
/* 老版本IE兼容识别 */
/* firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的本节点 */
/* lastChild 返回节点的最后一个子节点 */
/* nextSibling 下一个节点*/
/* let div = document.querySelector( 'div ' );
console.log( div.firstChild.nextSibling) */
/* previousSibling 上一个节点 */
/* let div = document.querySelector( 'div ' );
console.log( div.lastChild.previousSibling) */
</script>
dom获取
/* 兼容低版本浏览器 （适用IE8及以下）*/
/* 通过ID属性获取对象 */
/* console.log( document.getElementById('dom1') ); */
/* 通过标签名获取对象 */
/* getElementsByTagName 是获取到元素的集合 */
/* 通过下标选取对应元素 */
/* console.log(document.getElementsByTagName('div')[1]); */
/* 通过class属性获取对象 */
/* getElementsByClassName也是一个元素集合 */
/* 通过下标选取对应元素 */
/* console.log(document.getElementsByClassName('classdom')[2]); */
/* 适合高版本浏览器（不适用IE8及以下） */
/* 通过querySelector获取ID选择器（加#号） */
/* console.log( document.querySelector('#dom1') ); */
/* 通过querySelector获取class选择器，含有相同class的元素很多，只获取第一个 */
/* console.log( document.querySelector( '.classdom' ) ) */
/* 通过querySelector获取含有指定元素选择器的元素，有多个元素匹配上，只获取第一个*/
/* console.log(document.querySelector('div')); */
/* 通过querySelectorAll可以获取多个含有对应元素选择器的dom元素，
通过下标指定哪一个 */
/* console.log(document.querySelectorAll('div')[1]);
console.log(document.querySelectorAll('.classdom')[1]); */
