DOM：Document Object Model（文档对象模型）是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档。
-
兼容低版本浏览器比如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] );
-
对象.style.property=新样式通过id属性获取对象 let div = document.getElementById('app');div具有style 行内样式属性所以需要在style上写宽高属性,在style上填写宽高必须要加上单位px
- 高版本的浏览器可以识别
