querySelectorAll和querySelector用法

@阿乐今天敲代码没

querySelectorAll和querySelector用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素,并且找到后就返回节点对象。
querySelectorAll() 找出所有匹配的节点并返回数组。
下面举例：

找出所有标签
document.querySelectorAll("*")

---

找出head下所有的标签
document.head.querySelectorAll("*")

---

找出body标签下的所有div标签

document.body.querySelectorAll("div")

---

找出body标签下的第一个div标签

document.body.querySelectorAll("div")[0]

或

document.body.querySelector("div")

---

找出所有class=box的标签
document.querySelectorAll(".box")

---

找出所有class=box的div标签
document.querySelectorAll("div.box")

---

找出所有id=box的标签
document.querySelectorAll("#box")

---

找出所有p标签并且id=txt的标签
document.querySelectorAll("p#txt")

---

找出所有name=sex的标签
document.querySelectorAll("*[name=sex]")

---

找出所有存在name属性的标签
document.querySelectorAll("*[name]")

---

找出所有class=txt且有name属性的p标签
document.querySelectorAll("p.txt[name]")
或
document.querySelectorAll("p[class=txt][name]")

---

在 document 中选取 class = test 的 div 的第一个子元素 p 的第一个子元素

document.querySelectorAll("div.test>p:first-child")[0];
或
document.querySelector("div.test>p:first-child");

---

找到所有 id属性以box开始的input标签 document.querySelectorAll("input[id^='box']");
找到所有 id属性以box结束的input标签
document.querySelectorAll("input[id$='box']");
找到所有 id属性包含box的input标签
document.querySelectorAll("input[id*='box']");

---

选择表身中所有索引为偶数的tr标签

document.querySelectorAll("tbody tr:even");
选择表身中所有索引为偶数的tr标签
document.querySelectorAll("tbody tr:odd");