从 JS 更改页面 - Javascript

在网页开发过程中，经常需要使用 Javascript 来修改页面元素，例如改变文本内容、样式、添加或删除元素等等。本文将介绍如何使用 Javascript 更改页面元素。

获取元素

在修改元素之前，需要先获取这个元素。可以使用 document.getElementById、document.getElementsByClassName、document.getElementsByTagName 等方法来获取元素。

// 获取 id 为 "example" 的元素
const example = document.getElementById('example');

// 获取 class 名称为 "example" 的所有元素
const examples = document.getElementsByClassName('example');

// 获取所有的 p 元素
const paragraphs = document.getElementsByTagName('p');

修改元素

改变文本内容

要改变元素中的文本内容，可以设置其 textContent 属性或者使用 innerHTML 属性。textContent 只能操作文本内容，而 innerHTML 可以操作包括标签在内的 HTML 内容。

// 改变元素中的文本内容
example.textContent = 'Hello world!';

// 使用 innerHTML 来改变元素中的内容
example.innerHTML = '<strong>Hello world!</strong>';

改变样式

要改变元素的样式，可以设置其 style 属性。

// 改变元素的背景颜色
example.style.backgroundColor = 'blue';

// 改变元素的字体大小
example.style.fontSize = '20px';

添加或删除元素

要添加或删除元素，可以使用 appendChild、removeChild、createElement 和 createTextNode 等方法。

// 创建新元素并添加到页面中
const newElement = document.createElement('p');
const newText = document.createTextNode('This is a new paragraph.');
newElement.appendChild(newText);
document.body.appendChild(newElement);

// 删除元素
document.body.removeChild(newElement);

总结

通过上述方法，可以使用 Javascript 轻松地更改页面元素。我们可以根据自己的需求，使用不同的方法来完成不同的任务。