选择标签

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

document.getElementsByClassName

document.querySelector()
方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素Element。  如果找不到匹配项，则返回null。

查找第一个匹配 class 属性的 html 元素
这个例子中，会返回当前文档中第一个类名为 “myclass” 的元素：

var el = document.querySelector(".myclass")

获取匹配列表

要获取文档中所有<p>元素的NodeList。

var matches = document.querySelectorAll("p")

此示例返回文档中所有<div>元素的列表，其中 class 包含"note"或"alert"：

var matches = document.querySelectorAll("div.note, div.alert")

在这里，我们得到一个 <p> 元素的列表，其直接父元素是一个 class 为"highlighted"的div，并且位于 ID 为 "test" 的容器内。

var container = document.querySelector("#test")
var matches = container.querySelectorAll("div.highlighted > p")

此示例使用属性选择器返回文档中属性名为"data-src"的iframe元素列表：

var matches = document.querySelectorAll("iframe[data-src]")

这里，属性选择器用于返回 ID 为"userlist"的列表中包含值为"1"的"data-active"属性的元素

var container = document.querySelector("#userlist")
var matches = container.querySelectorAll("li[data-active='1']")

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

HTML DOM Attribute 对象

在 HTML DOM （文档对象模型）中，每个部分都是节点：

<input id='xbb' type="text" value="lalalla"></input>

var haha = document.getElementById("xbb")
haha = haha.getAttributeNode("value")
alert(haha.value)