获取元素
1.通过id获取
-
document.getElementById(字符串参数)
<div id='time'> 2020-01-01 </div>
let timeElement = document.getElementById('time') //如果找到,就返回该元素对象,如果没有找到就返回null console.dir(timeElement)//这个方法可以打印出一个对象所有的属性和方法
2.根据标签名获取
-
document.getElementsByTagName(标签名字符串)
<ol> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> </ol>
let lis = document.getElementsByTagName('li') //返回的是找到的元素对象的集合,以伪数组的形式呈现 //就算没有找到,也会返回一个伪数组,只不过为空
let ols = document.getElementsByTagName('ol') let olsLis =ols[0].getElementsByTagName('li')//这里之所以要取下标0,是因为需要元素对象.getElementsByTagName() //才能获取到它内部对应标签名的元素对象集合(伪数组)。
3.通过HTML5新增的方法获取
-
document.getElementsByClassName(类名字符串)
—>根据类名来获取let tips = document.getElementsByClassName('tips') //返回的是找到的元素对象的集合,以伪数组的形式呈现 //就算没有找到,也会返回一个伪数组,只不过为空
-
document.querySelector('选择器')
—>根据选择器来获取,但是如果获取到,即使有多个,也是只返回第一个let tip = document.querySelector('li') console.log(tip)//返回了第一个li元素对象 //如果没有找到,就返回null
-
document.querySelectorAll('选择器')
let tips = document.querySelectorAll('li') console.log(tips) //返回的是找到的元素对象的集合,以伪数组的形式呈现 //就算没有找到,也会返回一个伪数组,只不过为空
4.特殊元素获取
-
获取
body
元素对象let myBody = document.body
-
获取
html
元素对象let myHtml = document.documentElement