js中dom如何获取页面元素

本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

方法一：根据ID获取:document.getElementById(id);

vardiv=document.getElementById('main');
console.log(div);
//获取到的数据类型HTMLDivElement，对象都是有类型的
//HTMLDivElement<--HTMLElement<--Element<--Node<--EventTarget

方法二：根据标签名获取:document.getElementsByTagName(name);

varoDiv=document.getElementsByTagName('div');
alert(oDiv)//返回[objectHTMLCollection]

方法三：根据name获取元素*：getElementByName；

varoDiv=document.getElementsByName('div')[0];
alert(oDiv)//返回[objectHTMLCollection]

方法四：通过选择器返回指定选择器的第一个元素对象(H5新增)。

vartext=document.querySelector('#text');
console.log(text);
varboxes=document.querySelectorAll('.box');
for(vari=0;i<boxes.length;i++){
varbox=boxes[i];
console.log(box);
}