JavaScript 获取 HTML360

在 JavaScript 中，可以访问和操作 HTML 文档的元素，实现各种交互和动态效果。以下介绍如何使用 JavaScript 获取 HTML 元素的方法和技巧。

getElementById()

getElementById() 方法通过元素的 ID 选择器获取元素。它返回第一个匹配元素的引用。例如：```javascript
const element = ("my-element");
```

其中，"my-element" 是元素的 ID.

getElementsByClassName()

getElementsByClassName() 方法通过元素的 class 名称选择器获取元素。它返回一个包含所有匹配元素的集合。例如：```javascript
const elements = ("my-class");
```

其中，"my-class" 是元素的 class 名称.

getElementsByTagName()

getElementsByTagName() 方法通过元素的标签名称选择器获取元素。它返回一个包含所有匹配元素的集合。例如：```javascript
const elements = ("p");
```

其中，"p" 是 HTML 段落元素的标签名称.

querySelector()

querySelector() 方法使用 CSS 选择器语法获取第一个匹配元素。它返回一个 DOM 元素。例如：```javascript
const element = (".my-class");
```

其中，".my-class" 是 CSS class 选择器，选择具有此 class 名称的第一个元素.

querySelectorAll()

querySelectorAll() 方法使用 CSS 选择器语法获取所有匹配元素。它返回一个包含所有匹配元素的集合。例如：```javascript
const elements = (".my-class");
```

其中，".my-class" 是 CSS class 选择器，选择所有具有此 class 名称的元素.

HTMLCollection 与 NodeList

getElementsByClassName() 和 getElementsByTagName() 方法返回一个 HTMLCollection，它类似于数组但具有特定功能。querySelector() 和 querySelectorAll() 方法返回一个 NodeList，它也是一个类数组对象，具有不同的功能和方法。

操作 HTML 元素

获取 HTML 元素后，可以使用 JavaScript 操作它们。例如，可以设置或获取元素的属性、文本内容、样式、类名称等。```javascript
("style", "color: red;");
= "New text content";
("my-new-class");
```

事件处理

JavaScript 还允许为 HTML 元素添加事件处理程序，以便在发生特定事件（例如单击、鼠标悬停、键盘按下）时触发函数。```javascript
("click", function() {
alert("Element clicked!");
});
```

通过使用 getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector() 和 querySelectorAll() 方法，JavaScript 开发人员可以轻松获取 HTML 元素并对其进行操作，实现动态交互和效果。

2025-01-14

上一篇：JavaScript 函数式编程指南

下一篇：[JS vs JavaScript：有什么区别？]