过去获取 DOM 对象

<div id="foo"></div>

<script>
var foo = document.getElementById("foo")
</script>
<input type="text" name="foo" />

<script>
var foo = document.getElementsByName("foo")
</script>
<input type="text" />

<script>
var input = document.getElementsByTagName("input")
</script>

使用 Selectors API 获取 DOM 对象

  • querySelectorquerySelectorAll用于获得DOM对象,可以接受三种类型的参数:id(#)class(.)标签
  • querySelectorquerySelectorAll的区别是:querySelector返回找到的第一个节点,而querySelectorAll返回的是多个,是一个节点集合
// 返回body节点
document.querySelector("body")

// 返回id为k的节点
document.querySelector("#k")

// 返回id为k的节点下的第一个span节点
document.querySelector("#k span")

// 返回id为k的节点下的第一个span节点
document.querySelector("#k").querySelector("span")

// 返回所用tagName为li的节点集合(NodeList)
document.querySelectorAll("li")

// 返回class为li的div
document.querySelectorAll("div .li")

已添加到喜欢了