返回

在Javascript中操作网页元素DOM解析与操作示例代码

前端

DOM简介

DOM（文档对象模型）是一种用于表示和操作HTML文档的树形结构。它允许我们通过编程的方式来访问和修改网页元素。

在JavaScript中，DOM通过document对象来操作。document对象代表整个HTML文档，它包含了所有网页元素。

获取元素的API

JavaScript提供了许多API来获取网页元素。最常用的API包括：

  • getElementById()：通过元素的ID来获取元素。
  • getElementsByTagName()：通过元素的标签名来获取元素的集合。
  • getElementsByClassName()：通过元素的类名来获取元素的集合。

修改元素内容

要修改元素的内容，我们可以使用innerHTML属性。innerHTML属性包含了元素的所有HTML代码。我们可以通过给innerHTML属性赋值来修改元素的内容。

例如，以下代码将元素<h1>的内容修改为“Hello World!”：

document.querySelector('h1').innerHTML = 'Hello World!';

添加和删除元素

要添加元素，我们可以使用createElement()方法。createElement()方法创建一个新的元素，并将其返回。然后，我们可以使用appendChild()方法将新元素添加到父元素中。

例如，以下代码创建一个新的<p>元素，并将其添加到<body>元素中：

const newElement = document.createElement('p');
newElement.innerHTML = 'This is a new paragraph.';
document.body.appendChild(newElement);

要删除元素，我们可以使用removeChild()方法。removeChild()方法从父元素中删除一个子元素。

例如，以下代码从<body>元素中删除元素<p>：

document.body.removeChild(document.querySelector('p'));

示例代码

以下是一些使用DOM操作网页元素的示例代码：

  1. 改变元素的背景颜色：
document.body.style.backgroundColor = 'red';
  1. 隐藏元素：
document.querySelector('h1').style.display = 'none';
  1. 显示元素：
document.querySelector('h1').style.display = 'block';
  1. 为元素添加类名：
document.querySelector('h1').classList.add('my-class');
  1. 从元素中删除类名：
document.querySelector('h1').classList.remove('my-class');

总结

DOM是操作网页元素的强大工具。我们可以使用DOM来获取元素、修改元素内容、添加和删除元素等。通过学习DOM，我们可以实现各种网页交互效果。