HTML | DOM Div 对象

HTML中，<div> 元素是非常重要的元素之一。<div> 元素是块级元素，它被用于组合其他 HTML 元素并为其应用样式。通过JavaScript操作，我们可以获取和修改这些 <div> 元素，从而实现更加复杂的交互效果。

获取 DOM Div 对象

获取<div>对象最常用的方法是使用 getElementById()，该方法需要传递 HTML 页面上的一个 ID 参数，并将对应的 <div> 元素返回给我们。

// 获取id为“example”的<div>元素
const divElement = document.getElementById("example");

除了使用 ID 获取 <div> 元素对象，我们还可以使用查询选择器（querySelector()）和标签名称选择器（getElementsByTagName()）来获取匹配的元素。

// 使用查询选择器获取第一个类名为“example”的<div>元素
const divElement1 = document.querySelector(".example");

// 使用标签名称选择器获取所有的<div>元素
const divElementArr = document.getElementsByTagName("div");

操作 DOM Div 对象

获取 <div> 元素对象之后，我们可以使用 DOM API 中提供的方法来操作元素对象。

修改元素内容

我们可以使用 innerHTML 属性来获取或设置 <div> 元素的内容。

const divElement = document.getElementById("example");

// 获取<div>元素中的内容
const content = divElement.innerHTML;

// 设置<div>元素中的内容
divElement.innerHTML = "这是新的内容";

修改元素样式

我们可以使用 style 属性来访问元素的样式，并改变它们的值。

const divElement = document.getElementById("example");

// 访问元素的样式
const styles = divElement.style;

// 修改元素的样式
styles.backgroundColor = "blue";
styles.color = "white";

添加/删除 CSS 类

我们可以使用 classList 属性来添加或删除元素的 CSS 类。

const divElement = document.getElementById("example");

// 添加CSS类
divElement.classList.add("blue-text");

// 删除CSS类
divElement.classList.remove("blue-text");

结论

通过 JavaScript 操作 DOM <div> 元素，我们可以处理更复杂的交互效果，如单击、鼠标移动、下拉列表等。使用 DOM API 中提供的方法来处理 <div> 元素，可以使我们的处理更加方便和快速。