兼容低版本浏览器 比如ie8 以及 以下

通过id属性获取对象

console.log( document.getElementById('dom1') )

通过标签名获取对象

getElementsByTagName是获取到元素的集合

通过下标来选取对应的元素

console.log( document.getElementsByTagName('div')[2] ) 

通过class属性获取对象

getElementsByClassName也是一个元素集合

通过下标来选择元素 

console.log( document.getElementsByClassName('classdom')[1] ); */

适合用于高版本浏览器 

通过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] )

使用querySelectorAll可以获取多个含有对应类选择器的dom元素

通过下标可以选择第几个

console.log( document.querySelectorAll('.classdom')[2] )

innerText也会替换原来的内容

innerText 只会把文字显示在对应的区域，不会转义标签元素

document.querySelector('#dom1').innerText = '

平安夜平安

'

使用document.querySelector可以使用后代选择器

使用变量存起来的方式 不用每次都再找一遍 性能更好

firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点

childNodes 返回子节点集合，childNodes[i] （只返回子节点 如果存在空格或者换行 也会被算成一个子节点）

高版本的浏览器可以识别

firstElementChild和firstChild的区别是 忽略空格和换行直接获取元素节点

中间带Element的选择节点属性也是忽略空格和换行直接获取元素节点

firstElementChild 返回节点的第一个子节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

console.log(div.firstElementChild.nextElementSibling)

previousElementSibling 上一个节点

console.log(div.lastElementChild.previousElementSibling)