JavaScript中DOM属性和方法194

DOM（文档对象模型）是JavaScript用来操作和修改HTML文档的一种接口。它允许开发者动态地改变文档的内容、结构和样式。DOM属性和方法是开发者与文档交互的强大工具。

DOM属性

DOM属性是元素的特性或状态，可以被JavaScript访问和修改。一些常见的DOM属性包括：* `innerHTML`：获取或设置元素的HTML内容。
* `outerHTML`：获取或设置元素的整个HTML，包括自身。
* `value`：获取或设置表单元素（如``）的值。
* `id`：获取或设置元素的唯一ID。
* `className`：获取或设置元素的CSS类名。
* `style`：获取或设置元素的样式属性，可以是字符串或CSSStyleDeclaration对象。

可以通过以下方式访问和修改DOM属性：```javascript
// 获取属性
const innerHTML = ("my-element").innerHTML;
// 设置属性
("my-element").innerHTML = "New HTML";
```

DOM方法

DOM方法是元素上的操作，可以用来动态地修改文档。一些常见的DOM方法包括：* `createElement()`：创建一个新的HTML元素。
* `appendChild()`：将一个元素作为另一个元素的子元素添加。
* `removeChild()`：从父元素中移除一个子元素。
* `insertBefore()`：在另一个元素之前插入一个元素。
* `setAttribute()`：设置元素的属性。
* `getAttribute()`：获取元素的属性。
* `getBoundingClientRect()`：获取元素在页面中的边界框。

可以通过以下方式调用DOM方法：```javascript
// 创建一个元素
const newElement = ("div");
// 将新元素添加到文档中
(newElement);
```

操纵元素

DOM属性和方法可以结合使用来动态地操纵元素。例如，以下代码可以动态地更改元素的文本内容：```javascript
// 获取元素
const element = ("my-element");
// 更改元素的文本内容
= "New text";
```

以下代码可以动态地创建和添加一个新的HTML元素：```javascript
// 创建一个新的元素
const newElement = ("div");
// 设置元素的内容
= "New element";
// 将新元素添加到文档中
(newElement);
```

DOM事件

DOM事件是与元素相关联的事件，当某些事件发生时触发。常见的DOM事件包括：* `click`：当单击元素时触发。
* `mouseover`：当鼠标悬停在元素上时触发。
* `mouseout`：当鼠标离开元素时触发。
* `keydown`：当按下一个键盘键时触发。
* `keyup`：当释放一个键盘键时触发。

可以通过以下方式为元素添加事件侦听器：```javascript
// 添加单击事件侦听器
("my-element").addEventListener("click", function() {
// 当单击元素时运行的代码
});
```

DOM属性和方法是JavaScript用来与HTML文档交互的强大工具。通过理解和使用这些属性和方法，开发者可以动态地更改文档的内容、结构和样式，从而创建交互式和动态的Web应用程序。

2025-02-08

上一篇：JavaScript 关闭窗口

下一篇：用 JavaScript 构建树状结构