DOM 查询

Copy html
<div id="container">
  <p class="text">第一段文字</p>
  <p class="text highlight">高亮文字</p>
  <input type="text" name="username">
  <button id="btn">点击我</button>
</div>

样例

1. getElementById()

查找: 通过元素的 id 属性查找单个元素

返回: 单个Element对象

Copy javascript
const button = document.getElementById('btn');
// button 是一个指向 <button id="btn">点击我</button> 的Element对象

2. getElementsByClassName()

查找: 通过元素的 class 属性查找多个元素

返回: HTMLCollection (类数组对象,包含多个Element对象)

Copy javascript
const textElements = document.getElementsByClassName('text');
// textElements 是一个包含2个<p>元素的HTMLCollection

3. getElementsByTagName()

查找: 通过元素的标签名查找多个元素

返回: HTMLCollection

Copy javascript
const paragraphs = document.getElementsByTagName('p');
// paragraphs 是一个包含2个<p>元素的HTMLCollection

4. getElementsByName()

查找: 通过元素的 name 属性查找多个元素

返回: NodeList (类数组对象,包含多个Element对象)

Copy javascript
const usernameInputs = document.getElementsByName('username');
// usernameInputs 是一个包含1个<input>元素的NodeList

5. querySelector()

查找: 使用CSS选择器语法查找单个元素

返回: 单个Element对象 (匹配的第一个元素)

Copy javascript
const highlightedText = document.querySelector('.highlight');
// highlightedText 是指向 <p class="text highlight">高亮文字</p> 的Element对象

6. querySelectorAll()

查找: 使用CSS选择器语法查找多个元素

返回: NodeList

Copy javascript
const allParagraphs = document.querySelectorAll('p');
// allParagraphs 是一个包含2个<p>元素的NodeList

7. closest()

查找: 从当前元素开始向上遍历DOM树,查找最近的匹配指定选择器的祖先元素

返回: 单个Element对象 (最近的匹配祖先元素)或null

Copy javascript
const button = document.getElementById('btn');
const container = button.closest('#container');
// container 是指向 <div id="container"> 的Element对象

8. matches()

查找: 检查当前元素是否匹配指定的CSS选择器

返回: Boolean (表示元素是否匹配指定的选择器)

Copy javascript
const firstParagraph = document.querySelector('p');
const isTextClass = firstParagraph.matches('.text');
// isTextClass 为 true

9. getElementsByTagNameNS()

查找: 在指定命名空间中通过标签名查找多个元素

返回: HTMLCollection

Copy javascript
// 假设在SVG命名空间中
const svgElements = document.getElementsByTagNameNS('<http://www.w3.org/2000/svg>', 'circle');
// svgElements 是一个包含所有SVG圆形元素的HTMLCollection

10. elementFromPoint()

查找: 获取指定坐标点上最上层的元素

返回: 单个Element对象 (指定坐标处最上层的元素)

Copy javascript
const element = document.elementFromPoint(50, 50);
// element 是坐标(50,50)处最上层元素的Element对象

11. elementsFromPoint()

查找: 获取指定坐标点上所有重叠的元素

返回: Array of Element对象

Copy javascript
const elements = document.elementsFromPoint(50, 50);
// elements 是一个包含

CSS 选择器

类选择器：通过class属性查找元素。.className

ID选择器：通过id属性查找元素。#idName

标签选择器：通过HTML标签名查找元素。p, div, span

属性选择器：通过元素的属性查找元素。[attribute], [attribute="value"]

伪类选择器：选择特定状态的元素。:hover, :first-child, :nth-child()

伪元素选择器：选择元素的特定部分。::before, ::after

组合选择器：

后代选择器（空格）：div p

子元素选择器（>）：div > p

相邻兄弟选择器（+）：h1 + p

通用兄弟选择器（~）：h1 ~ p

群组选择器：同时选择多个选择器。div, p, .className

通用选择器：选择所有元素。*