js 获取DOM元素 语法

jsJavaScript获取标签选择元素匹配元素

梗概:

获取html标签主要有以下几种方法

1. 通过标签的特征直接获取
2. 通过标签间的结构层级关系获取

1. 语法:

1. 返回多个匹配项的第一个:

父元素.querySelector('css语法的标签选择器')

从父元素的子元素中进行选择

1.1. 说明:

1. use::css 标签选择器
2. 第一个指的是HTML从上往下排列的第一个
3. 父元素可是是document, 即所有元素的父元素

2. 以数组形式返回所有匹配项:

父元素.querySelectorAll('css语法的标签选择器')

3. 获取父节点:

child::dom元素的parentNode属性

4. 获取子结点:

child::dom元素的childNodes属性 child::dom元素的firstChild和lastChild属性

5. 获取兄弟元素:

child::dom元素的nextElementSibling和previousElementSibling属性

6. 获取特殊标签元素:

6.1. 获取body标签:

document.body

6.2. 获取html元素:

document.documentElement

2. 注意:

1. ts中从DOM中获得的元素都是Element类型的, 这个类型是个非常宽泛的类型, 一般需要进行断言才能访问更具体的属性和方法
   1. child::ts 类型断言
   2. 常用的断言目标html类型会在vscode中自动补全提示