21xrx.com
2025-03-25 15:29:54 Tuesday
文章检索 我的文章 写文章
如何利用JavaScript操作HTML中的元素——document对象
2023-06-16 16:10:22 深夜i     17     0
JavaScript document对象 DOM

如何利用JavaScript操作HTML中的元素——document对象

在HTML页面中,document对象是非常重要的一个对象,它代表着整个页面的文档对象模型(DOM),使得我们可以通过JavaScript来操作HTML页面中的元素,例如获取元素内容、修改元素样式、添加新元素等等。下面来看几个常用的document对象操作代码示例:

1.获取元素内容

// 通过ID获取页面元素
var element = document.getElementById("element-id");
// 获取元素内容
var content = element.innerHTML;

2.修改元素样式

// 通过ID获取页面元素
var element = document.getElementById("element-id");
// 修改元素样式
element.style.color = "red";

3.添加新元素

// 通过标签名创建新元素
var newElement = document.createElement("div");
// 添加元素内容
newElement.innerHTML = "Hello, World!";
// 将新元素添加到页面中
document.body.appendChild(newElement);

如上所示,通过document对象,我们可以通过ID、标签名等方式获取到页面中的元素,并对其进行操作。同时,我们可以使用document对象的createElement方法来创建新的元素,并将其添加到页面中。

  
  

评论区