兼容低版本浏览器 DOM文档对象模型 通过id获取DOM对象 console.log(document.getElementById('dom1')) /* 通过标签名获得 / / getElementsByTagName是获取到元素的集合，通过下标来选取对应的元素 / console.log(document.getElementsByTagName('div')[1]) / 通过class属性获取 getElementsByClassName也是一个元素集合，通过下标来选择元素 / console.log(document.getElementsByClassName('classdom')[0]) / 适合用于高版本浏览器 不适用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')[0]) /* 通过querySelectorAll获取多个含有对应class元素选择器的dom元素 通过下标可以选择第几个 */ console.log(document.querySelectorAll('.classdom')[0])
/* innerText也会替换原来的内容，只会把文字显示在对应的区域。不像.innerHTML可以转译标签 */
/* 因为div元素自身没有width和height属性，所以不能直接的设置 / div.style.width='200px' div.style.height='200px'/ 这个不是自身上面的属性，需要加上单位 / / div具有style行内样式属性，所以需要在style上写宽高属性，在style上填写宽高是必修要加上单位px / / 当中的百分比是相对于父元素而设置的，所以这里要给body设置。而px是物理像素，是相对于屏幕而言的 */ div.style.marginTop='100px'/*像margin-top这种 这里必须要换成驼峰 / / childNodes返回子节点，是只返回子节点，所以没有li 如果存在空格或者换行也会被算成一个子节点 / / let div=document.querySelector('div') console.log(div.childNodes) / / 获得ul / / 通过let div=document.querySelector('div') console.log(div.childNodes)打印出来，可以找到相对于的位置 / / let cc=div.childNodes; cc[1].style.background='red' cc[1].style.fontSize='20px' cc[3].style.background='green' cc[5].style.background='blue' cc[5].style.width='200px' cc[5].style.height='100px' */
