使用JavaScript操作DOM元素 |21xrx.com

使用JavaScript操作DOM元素

2023-06-15 15:42:01 深夜i -- --

JavaScript document DOM操作

使用JavaScript操作DOM元素，了解document对象

JavaScript是一种常用的编程语言，在WEB开发中具有广泛应用。它可以与HTML和CSS一起使用，实现网页动态效果。其中，操作DOM元素是JavaScript常用的操作之一。而在操作DOM时，我们会用到一个重要的对象：document。

document对象表示包含整个网页内容的文档。通过它，我们可以获取网页中的各种元素，并对其进行操作。下面，我们就通过几个简单的案例，来了解JavaScript中document对象的用法。

1. 获取元素

通过document可以获取页面中的DOM元素，例如：


//获取id为demo的元素
var demo = document.getElementById("demo");
//获取class为box的元素列表
var boxs = document.getElementsByClassName("box");
//获取标签名为p的元素列表
var ps = document.getElementsByTagName("p");

2. 修改元素属性

通过document还可以修改元素的属性，例如：


//修改id为demo的元素文本内容
demo.innerText = "Hello World!";
//修改class为box的元素的背景颜色
for(var i=0; i
  boxs[i].style.backgroundColor = "#eee";
}
//修改标签名为p的元素的字体大小
for(var i=0; i
  ps[i].style.fontSize = "16px";
}

3. 添加元素

通过document还可以动态地添加元素到页面中，例如：


//创建一个新的div元素
var newDiv = document.createElement("div");
//设置div元素的属性
newDiv.innerText = "I'm a new div!";
newDiv.style.backgroundColor = "#f00";
newDiv.style.width = "100px";
newDiv.style.height = "100px";
newDiv.style.position = "absolute";
newDiv.style.top = "100px;
newDiv.style.left = "100px";
//将div元素添加到body中
document.body.appendChild(newDiv);

了解如何操作document对象，可以让我们更好地掌握JavaScript的DOM操作，从而实现更加丰富的网页效果。

上一篇: idea打包java可执行jar包

下一篇: "Java中的IO流：分类与应用"

评论区

()

相似文章