DOM

 兼容低版本浏览器 比如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] )

 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 ) 

 对象.style.property=新样式 通过id属性获取对象 

let div = document.getElementById('app');

 div具有style 行内样式属性

所以需要在style上写宽高属性 在style上填写宽高必须要加上单位px 

px 是物理像素 是相对于屏幕而言 

 %是相对于父元素而设置的