常见查找dom元素的几种方式

document.getElementById

只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。
如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的

document.querySelector

返回节点子树内与之相匹配的第一个 Element 节点。如果没有匹配的节点，则返回null。

匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

• 查找第一个匹配 class属性的html元素
  • 这个例子中，会返回当前文档中第一个类名为 “myclass” 的元素：
  • var el = document.querySelector(".myclass");
  • 这里, 一个class属性为"user-panel main"的div元素
    内包含一个name属性为"login"的input元素 ，如何选择，如下所示:

    <div class="user-panel main">
        <input name="login"/>
    </div>

• var el = document.querySelector("div.user-panel.main input[name='login']");

Document.querySelectorAll()

返回一个NodeList 包含节点子树内所有与之相匹配的Element节点，如果没有相匹配的，则返回一个空节点列表。

此方法基于ParentNode mixin的querySelectorAll() 实现。
elementList = parentNode.querySelectorAll(selectors);

• 要选择文档中所有CSS的类(class)是warning或者note的段落§元素,可以这样写：

var special = document.querySelectorAll( "p.warning, p.note" );
// 或者也可以通过ID来查询
var el = document.querySelector( "#main, #basic, #exclamation" );

执行上面的代码后，el就包含了文档中元素的ID是main，basic或exclamation的所有元素中的第一个元素。

querySelector() and querySelectorAll() 里可以使用任何CSS选择器。
适用于 Document, DocumentFragment, 或 Element 接口
这比以前的技术要快得多