正文

轻松掌握DOM编程：10个实战案例教你玩转网页元素操作

/0 浏览量
0401

DOM（文档对象模型）是网页开发中不可或缺的一部分，它允许开发者通过JavaScript操作网页上的元素。掌握DOM编程，可以帮助你轻松实现各种网页效果。本文将为你带来10个实战案例，通过这些案例，你将学会如何玩转网页元素操作。

实战案例一：获取并修改元素内容

// 获取元素
var element = document.getElementById("myElement");

// 修改元素内容
element.innerHTML = "新的内容";

在这个案例中，我们首先通过getElementById方法获取了一个元素，然后使用innerHTML属性修改了它的内容。

实战案例二：添加和删除元素

// 创建一个新的元素
var newElement = document.createElement("div");
newElement.innerHTML = "这是一个新元素";

// 将新元素添加到页面中
document.body.appendChild(newElement);

// 删除一个元素
var elementToRemove = document.getElementById("elementToRemove");
document.body.removeChild(elementToRemove);

在这个案例中，我们创建了一个新的div元素，并将其添加到了页面的body中。同时，我们还展示了如何删除一个已存在的元素。

实战案例三：修改元素样式

// 获取元素
var element = document.getElementById("myElement");

// 修改元素样式
element.style.color = "red";
element.style.fontSize = "20px";

在这个案例中，我们通过getElementById方法获取了一个元素，并使用style属性修改了它的颜色和字体大小。

实战案例四：绑定事件监听器

// 获取元素
var element = document.getElementById("myElement");

// 绑定点击事件
element.addEventListener("click", function() {
  alert("元素被点击了！");
});

在这个案例中，我们为获取到的元素绑定了一个点击事件监听器，当元素被点击时，会弹出一个提示框。

实战案例五：使用类选择器

// 获取所有具有特定类的元素
var elements = document.getElementsByClassName("myClass");

// 遍历并修改元素样式
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "blue";
}

在这个案例中，我们使用getElementsByClassName方法获取了所有具有特定类的元素，并遍历它们来修改样式。

实战案例六：使用标签选择器

// 获取所有具有特定标签的元素
var elements = document.getElementsByTagName("p");

// 遍历并修改元素内容
for (var i = 0; i < elements.length; i++) {
  elements[i].innerHTML = "这是一个段落元素";
}

在这个案例中，我们使用getElementsByTagName方法获取了所有p标签的元素，并遍历它们来修改内容。

实战案例七：动态创建表格

// 创建表格
var table = document.createElement("table");

// 创建表头
var thead = document.createElement("thead");
var row = document.createElement("tr");
var th1 = document.createElement("th");
var th2 = document.createElement("th");
th1.innerHTML = "姓名";
th2.innerHTML = "年龄";
row.appendChild(th1);
row.appendChild(th2);
thead.appendChild(row);

// 创建表体
var tbody = document.createElement("tbody");
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "张三";
td2.innerHTML = "25";
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);

// 将表头和表体添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中
document.body.appendChild(table);

在这个案例中，我们动态创建了一个表格，并添加了表头和表体。

实战案例八：使用正则表达式选择元素

// 使用正则表达式选择元素
var elements = document.querySelectorAll("a[href*='/news/']");

// 遍历并修改元素样式
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = "green";
}

在这个案例中，我们使用querySelectorAll方法和正则表达式选择所有具有特定属性值的元素，并修改了它们的样式。

实战案例九：使用querySelector和querySelectorAll选择元素

// 使用querySelector选择元素
var element = document.querySelector("a[href='/news/']");

// 修改元素内容
element.innerHTML = "新闻页面";

// 使用querySelectorAll选择元素
var elements = document.querySelectorAll("p");

// 遍历并修改元素内容
for (var i = 0; i < elements.length; i++) {
  elements[i].innerHTML = "这是一个段落元素";
}

在这个案例中，我们分别使用了querySelector和querySelectorAll方法来选择元素，并修改了它们的样式或内容。

实战案例十：使用getBoundingClientRect获取元素位置

// 获取元素位置
var element = document.getElementById("myElement");
var rect = element.getBoundingClientRect();

console.log("元素位置：", rect.left, rect.top);

在这个案例中，我们使用getBoundingClientRect方法获取了一个元素的位置，并将其打印到控制台。

通过以上10个实战案例，相信你已经对DOM编程有了更深入的了解。在实际开发中，灵活运用这些技巧，可以帮助你轻松实现各种网页效果。祝你学习愉快！

-- 展开阅读全文 --