querySelector 和 querySelectorAll 学习笔记

querySelector 和 querySelectorAll 简介

按照CSS选择器匹配元素，所以这两个方法其实没啥好学的。
要学的其实就是CSS选择器，关于选择器这篇笔记有详细介绍：CSS 学习笔记 - 选择器

方法	区别	支持
querySelector	返回第一个匹配的元素	Element, Document
querySelectorAll	返回所有匹配的元素	Element, Document

相对选择

父级

• parentElement 父元素

var parent = childElement.parentElement;

兄弟

• previousSibling 前一个节点 （包括文本、注释）
• previousElementSibling 前一个元素节点
  返回当前元素的前一个元素。如果当前就是第一个元素返回null

var previousNode= currentElement.previousSibling;
var previousElementNode= currentElement.previousElementSibling;

• nextSibling 后一个节点 （包括文本、注释）
• nextElementSibling 后一个元素节点
  返回当前元素的下一个元素。如果当前就是最后一个元素返回null

var nextNode = currentElement.nextSibling;
var nextElementNode = currentElement.nextElementSibling;

后代

• ParentNode.children 所有后代

var childList = parentNode.children

• ParentNode.childElementCount 所有后代的数量

var childCount = parentNode.childElementCount 

• ParentNode.firstElementChild 第一个子元素

var first = parentNode.firstElementChild;

• ParentNode.lastElementChild 最后一个子元素

var last = parentNode.lastElementChild ;

前朝余孽

• getElementById()
  注意：这里的参数id前面不用加#号。找不到时返回null

var element = document.getElementById('myId');

• getElementsByClassName()
  按 className匹配元素，返回的是一个HTMLCollection集合，找不到时集合为空
  注意：这里的参数类名前面不用加.号。

var htmlCollection = element.getElementsByClassName('class1 class2 class3');

• getElementsByName()
  按元素name属性查找，返回 NodeList 集合，找不到时集合为空

var nodeList= document.getElementsByName("myName");

• getElementsByTagName()
  按标签名查找，返回的是一个HTMLCollection集合，找不到时集合为空

// 获取所有 p 标签
var htmlCollection  = document.getElementsByTagName("p");

• getElementsByTagNameNS()
  在指定命名空间内，按照标签名查找，返回的是一个HTMLCollection集合，找不到时集合为空

// 我感觉我不会用到这个。。。

参考资料

CSS 学习笔记 - 选择器
MDN：Document.querySelector()
MDN：Element.querySelector()
MDN：previousSibling
MDN：previousElementSibling
MDN：nextSibling
MDN：nextElementSibling
MDN：children