[JavaScript知识库]js dom操作大全

最基础的，不再分析
(下图最后一个不太搜索命名空间的？)

document.querySelector()

根据选择器查找单个元素

参数： 包含一个或多个要匹配的选择器的 DOM字符串DOMString。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。(参数包含伪元素返回空)

返回值: 表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

例子：获取类名为test下id为a的dom

let dom=xxx.querySelector(".test #a");

注意：

1. 如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // 不匹配任何元素

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // 匹配第一个div

  document.querySelector('#foo:bar')    // 不匹配任何元素
  document.querySelector('#foo\\:bar')  // 匹配第二个div
</script>

2. 参数包含伪元素返回空

document.querySelectorAll

根据选择器查找所有元素

参数：一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是，会抛出一个 SyntaxError 错误。

返回值：一个静态 NodeList（节点集合），包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList

> getElementsBy ClassName/TagName/Name 三个方法返回类型为[HTMLCollection](https://blog.csdn.net/w_____w_____/article/details/109740463)(元素集合)，元素是节点(node)的子集（节点即可以包含元素(element)，也可以包含文本节点，注释节点）

注意: 同querySelector

Node.children

Element.children 是一个只读属性，返回 一个Node的子elements(元素节点) ，是一个动态更新的 HTMLCollection。

Node.childrenNodes

Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

Node.parentElement

返回指定节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。

Node.parentNode

返回指定的节点在DOM树中的父节点.

兄弟节点

Node.nextSibling

**Node.nextSibling **是一个只读属性，返回当前节点的下一个兄弟节点(node)，没有则返回 `null`。

Element.nextElementSibling

**nextElementSibling** 返回当前元素的下一个兄弟元素节点(element)，没有则返回 `null`。

Node.previousSibling

Node.previousElementSibling

参考链接

https://developer.mozilla.org/zh-CN/docs/Web/API