javascript获取dom元素的方法：1、用getelementbyid()根据id获取元素；2、用getelementsbyname()根据name属性获取元素；3、用getelementsbytagname()根据标签名获取元素；4、用getelementsbyclassname()根据类名获取元素；5、用queryselector()根据指定选择器返回第一个元素对象。
本教程操作环境：windows7系统、javascript1.8.5版、dell g3电脑。
js 由三部分组成：
ecmascript：js 语法
dom：文档对象模型
bom：浏览器对象模型
webapi 是w3c组织制定的标准，在webapi中我们主要学习 dom和bom 而且对于webapi来说也是 js 独有的部分，它既不属于js自己独有的范畴也隶属于js学习的部分。不过在学习webapi之前需要 js 的基础作为 学习 webapi基础。
domdom简介：文档对象模型（dom），是 w3c 组指推荐的处理可扩展标记语言（html或xml）的标准编程接口，w3c 已经定义了一系列的dom接口，通过这些dom接口可以改变网页的内容、结构和样式。
文档：一个页面就是一个文档，dom中使用 document 表示
元素：页面中所有的标签都是元素，dom中使用element表示
节点：网页中所有的内容都可以看作是一个节点（标签、属性、文本、注释等）。dom中使用node表示
获取dom元素如何获取元素
根据 id 获取，使用 getelementbyid() 方法获取带有id元素的对象6c04bd5ca3fcae76e30b72ad730ca86d95e29943e26c684472cd722de1d2173asj16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e49563f1c4e4b6b16bbbd69b2ee476dc4f83a// 1、因为页面是从上往下执行的，所以先有标签，后来有script获取// 2、get 获得 element 元素 by通过 --- 驼峰命名法// 3、参数 id 是大小写敏感的// 4、返回的是一个元素var sj = document.getelementbyid('overview');console.log(sj)// dir 打印我们返回的元素对象，更好的查看里面的属性和方法console.dir(sj)2cacc6d41bbb37262a98f745aa00fbf0
根据name属性获取：使用 getelementsbyname() 方法可以返回带有指定name属性的对象集合
document.getelementsbyname('name')
根据标签名获取：使用 getelementsbytagname() 方法可以返回带有指定标签名的对象集合。
<body><ul> <li>花海</li> <li>晴天</li> <li>七里香</li> <li>花海</li> <li>晴天</li></ul><ul id="nav"> <li>花海2</li> <li>晴天2</li> <li>七里香2</li> <li>花海2</li> <li>晴天2</li></ul></body><script>// 1、返回的是 获取过来元素对象的集合，以伪数组形式存储var lis = document.getelementsbytagname("li");console.log(lis);// 获取特定的那个console.log(lis[2]);// 2、遍历元素对象for(var i = 0; i < lis.length; i++) { console.log(lis[i]);}// 3、element.getelementbytagname() 可以获取这个元素里面的某些标签var nav = document.getelementbyid("nav");var nav2 = nav.getelementsbytagname('li')console.log(nav);</script>
注意：因为得到的是一个对象的集合，所以我们想要操作元素就需要遍历。得到元素对象是动态的
通过 html5 新增的方法获取
getelementsbyclassname(‘类型’) 根据类名获取元素// 1、使用 getelementbyclassname 获取 class类名元素 var box = document.getelementsbyclassname("box"); // 可以获取全部的 class名为 box的元素console.log(box);
queryselector(‘选择器’) 根据指定选择器返回第一个元素对象// 2、queryselector 返回指定选择器的第一个元素对象 切记：里面选择器需要添加 .box #navvar firstbox = document.queryselector('.box') // 只能获取第一个class名为 box 的元素console.log(firstbox);var nav = document.queryselector('#nav')console.log(nav);var li = document.queryselector('li') // 获取的也是第一个 li 元素console.log(li);
queryselectorall(‘选择器’) 返回指定选择器所有元素对象的集合// 3、queryselectorall 返回 全部的 li 元素var allbox = document.queryselectorall('li') console.log(allbox);
特殊元素获取(body, html)
获取 body 元素// 1. 获取 body 元素var bodyele = document.body;console.log(bodyele)
获取 html 元素// 2. 获取 html 元素var htmlele = document.documentelement;console.log(htmlele)
注意：重点需要记住获取普通元素的几种方法。body、html这些不常用，仅作了解即可。
【相关推荐：javascript视频教程、编程基础视频】
以上就是javascript用什么来获取dom元素的详细内容。