js中获取元素的几种方式——总结

本文正在参与技术专题征文Node.js进阶之路，点击查看详情

获取Id名 var box=document.getElementById('app');

获取类名 var box2=document.getElementsByClassName('box');

获取元素集合 var box6=document.getElementsByTagName('span');

获取选择器 querySelector（css选择器）获取的是一个元素

querySelectorAll(css选择器)获取的是一个集合

• 前者识别结构，能够获取结构
• 后者识别不了结构，都是文本

例如：var box3=document.querySelector('#app');

获取结构 文本 console.log(box.innerHTML); console.log(box.innerText);

获取全局样式 obj=getComputedStyle(style); var obj=getComputedStyle(box);box为已经获取过的元素变量名 console.log(obj);

当前元素的类名 box.className

增加或者修改类名 box.className='ccc'; 或 var cla=box; cla.className='payne';

新增类名 var box=document.getElementById('box'); box.className='name'; box.className=box.className+ ' ccc'; 或 box.className+=' ccc'

新增和移除类名  
 box.classList.add('')
 box.classList.remove('')
 

有则删除，无则添加 box.classList.toggle('box')