常用的获取DOM元素方法

JavaScript HTML DOM 元素

通常，通过 JavaScript，查找 HTML 元素有以下几种方法。

• 通过 id 查找 HTML 元素
• 通过标签名查找 HTML 元素
• 通过类名查找 HTML 元素
• 通过 CSS 选择器查找 HTML 元素
• 通过Name名称查找HTML元素
• 通过 HTML 对象集合查找 HTML 元素

---

1、通过 id 查找 HTML 元素
个人认为最简单、直接的获取元素方法就是通过Id获取

document.getElementById("id名称");

2、通过标签名查找 HTML 元素

document.getElementsByTagName("div");//返回一个包含所有div标签的伪数组
document.getElementsByTagName("div")[0];//获取第一个div标签元素

注意：是getElements！返回的是一个伪数组

3、通过类名查找 HTML 元素

document.getElementsByClassName("bpp")[0];//与标签名查询一致，返回一个伪数组，以下标取第一个获取元素

4、通过 CSS 选择器查找 HTML 元素
如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

document.querySelector("div.bpp");//返回一个匹配的元素
document.querySelectorAll("div.bpp");//返回一个伪数组
document.querySelectorAll("div.bpp")[0];//获取匹配到的第一个元素

细心的朋友应该会发现，通过getElementsByClassName与querySelectorAll获取元素返回的一个是HTMLCollection，一个是NodeList。其实这两个都是伪数组，不同是，当你点开__proto__时，NodeList里面有forEach()方法，而HTMLCollection里面没有；这意味着通过querySelectorAll获取的元素可以被遍历，而getElementsByClassName则不行。

5、通过Name名称查找HTML元素

document.getElementsByName("inp");//返回一个伪数组NodeList
document.getElementsByName("inp")[0];//返回一个Name="inp"的元素

6、通过 HTML 对象集合查找 HTML 元素
在此只列举一例，获取表单元素

	<form id="zeki" action="#">
        <input name="inp" type="text">
    </form>
    <script>
    	document.forms["zeki"];
    	//获取id为"zeki"的forms(表单)
    </script>

以下 HTML 对象（和对象集合）可自行了解：
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

---

总结：
1、以getElement开头的方法，返回的是匹配的元素；
2、以getElements开头的方法，返回的则是一个伪数组，需配合下标来获取元素，还有一个querySelectorAll;

如有错误请及时提醒，谢谢！！