querySelector 和 querySelectorAll 学习笔记

男娘i 2022-12-26 15:30 185阅读 0赞

### querySelector 和 querySelectorAll 学习笔记 ###

*  querySelector 和 querySelectorAll 简介
 *  相对选择
 *   *  父级
     *  兄弟
     *  后代
 *  前朝余孽
 *  参考资料

# querySelector 和 querySelectorAll 简介 #

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

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>区别</th> 
   <th>支持</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>querySelector</td> 
   <td>返回<code>第一个</code>匹配的元素</td> 
   <td>Element, Document</td> 
  </tr> 
  <tr> 
   <td>querySelectorAll</td> 
   <td>返回<code>所有</code>匹配的元素</td> 
   <td>Element, Document</td> 
  </tr> 
 </tbody> 
</table>

# 相对选择 #

## 父级 ##

*  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()**][getElementById]  
    注意：这里的参数`id`前面不用加`#`号。找不到时返回`null`

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

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

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

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

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

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

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

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

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

# 参考资料 #

[CSS 学习笔记 - 选择器][CSS _ -]  
[MDN：Document.querySelector()][MDN_Document.querySelector]  
[MDN：Element.querySelector()][MDN_Element.querySelector]  
[MDN：previousSibling][MDN_previousSibling]  
[MDN：previousElementSibling][MDN_previousElementSibling]  
[MDN：nextSibling][MDN_nextSibling]  
[MDN：nextElementSibling][MDN_nextElementSibling]  
[MDN：children][MDN_children]

[CSS _ -]: https://jerryjin.blog.csdn.net/article/details/108303938
[getElementById]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById
[getElementsByClassName]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getElementsByClassName
[HTMLCollection]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
[getElementsByName]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByName
[NodeList]: https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList
[getElementsByTagName]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName
[getElementsByTagNameNS]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getElementsByTagNameNS
[MDN_Document.querySelector]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
[MDN_Element.querySelector]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelector
[MDN_previousSibling]: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/previousSibling
[MDN_previousElementSibling]: https://developer.mozilla.org/zh-CN/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
[MDN_nextSibling]: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nextSibling
[MDN_nextElementSibling]: https://developer.mozilla.org/zh-CN/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling
[MDN_children]: https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/children