（一）DOM 常用操作 —— “查找”节点

在 DOM 树中，如果想要操作一个节点，那么首先要“查找”到这个节点。查找节点的方法由 Document 接口定义，而该接口由 JavaScript 中的 document 对象实现，你必须熟记它们（各大浏览器对它们的支持情况）。

方法概览

1. getElementsById()

2. getElementsByName()

3. getElementsByTagName()

4. getElementsByClassName()

5. querySelector()

6. querySelectorAll()

一、通过指定的 id 属性获取节点对象

var e = document.getElementsById(id);

如果一个页面的ID属性不是唯一的，则返回第一个ID对应的节点对象。

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。 

二、通过指定的 name 属性获取节点对象集合

var el = document.getElementsByName(name);

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。 

三、通过指定的 tagName 获取节点对象集合

var el = document/element.getElementsByTagName(tagName);

如果把特殊字符串 "*" 传递给该方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

四、通过指定的 className 获取节点对象集合

var el = document/element.getElementsByClassName(class1[ class2]);

多个类名使用空格分隔，如 "test demo"。　　

五、通过匹配 css selector 获取节点对象　

var e = document/element.querySelector(CSS Selector);

匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。　 

六、通过匹配 css selector 选择器获取节点对象集合　

var el = document/element.querySelectorAll(CSS Selector);　

返回文档中匹配的CSS选择器的所有元素节点列表。

转载于:https://www.cnblogs.com/flyingweb/p/8022472.html