返回

DOM操作元素之改变页面内容、结构和样式

前端

当我们打开一个网页时，浏览器会将网页的HTML代码解析成DOM树，然后根据DOM树来渲染出网页。DOM树中的每个节点都代表了网页中的一个元素，我们可以通过JavaScript来操作这些元素，从而改变网页的内容、结构和样式。

改变元素内容

改变元素内容有两种方法：

  • innerHTML属性 ：innerHTML属性可以获取或设置元素的内容。例如，以下代码将<p>元素的内容设置为"Hello World!":
document.querySelector("p").innerHTML = "Hello World!";
  • textContent属性 ：textContent属性可以获取或设置元素的文本内容。例如，以下代码将<p>元素的文本内容设置为"Hello World!":
document.querySelector("p").textContent = "Hello World!";

改变元素属性

我们可以使用setAttribute()方法来改变元素的属性。例如，以下代码将<a>元素的href属性设置为"https://example.com":

document.querySelector("a").setAttribute("href", "https://example.com");

改变元素样式

我们可以使用style属性来改变元素的样式。例如，以下代码将<p>元素的字体大小设置为"20px":

document.querySelector("p").style.fontSize = "20px";

改变元素结构

我们可以使用createElement()方法来创建新的元素，并使用appendChild()方法将新元素添加到现有元素中。例如，以下代码创建一个新的<p>元素，并将其添加到<body>元素中:

var newParagraph = document.createElement("p");
document.body.appendChild(newParagraph);

我们也可以使用removeChild()方法来从现有元素中删除元素。例如，以下代码从<body>元素中删除<p>元素:

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

DOM操作元素是JavaScript中非常重要的一个概念，它可以让我们改变网页的内容、结构和样式。我们可以通过DOM操作元素来实现各种各样的效果，例如，我们可以使用DOM操作元素来创建一个动态的网页，或者我们可以使用DOM操作元素来创建一个游戏。