JavaScript HTML DOM - 改变 HTML


JavaScript HTML DOM,即JavaScript HTML文档对象模型,是指用于访问和操作HTML文档的编程接口。它允许开发者通过JavaScript代码来改变HTML元素及其属性,使得网页在页面加载后能够动态的改变内容和样式。

一、获取HTML元素

1.1 通过getElementById()方法获取元素

该方法接受一个元素ID作为参数,返回一个对象,允许您访问元素的属性,如文本内容、样式和实际对象本身。下面是一个例子:

var element = document.getElementById("example");

1.2 通过getElementsByTagName()方法获取元素

该方法接受一个标签名称作为参数,返回一个HTMLCollection对象,该对象包含文档中所有具有指定标签名称的元素。下面是一个例子:

var elements = document.getElementsByTagName("p");

1.3 通过getElementsByClassName()方法获取元素

该方法接受一个类名作为参数,返回一个HTMLCollection对象,该对象包含文档中所有具有指定类名的元素。下面是一个例子:

var elements = document.getElementsByClassName("example");

二、改变HTML元素

2.1 改变元素的文本内容

可以通过innerHTML属性或textContent属性来改变元素的文本内容,下面是一个例子:

var element = document.getElementById("example");
element.innerHTML = "New Content";
var element= document.getElementById("example");
element.textContent = "New Content";

innerHTML属性允许您使用HTML标记,而textContent属性不允许。

2.2 改变元素的样式

可以通过style属性来改变元素的样式,下面是一些常见的样式示例:

var element = document.getElementById("example");
element.style.backgroundColor = "red";
element.style.fontSize = "16px";
element.style.color = "#fff";

2.3 改变元素的属性

可以通过setAttribute()方法或直接修改属性来改变元素的属性,下面是一个例子:

var element = document.getElementById("example");
element.setAttribute("src", "newimage.png");
var element = document.getElementById("example");
element.src = "newimage.png";

三、添加和删除元素

3.1 创建元素

可以通过createElement()方法来创建新的HTML元素,也可以通过createTextNode()方法来创建文本节点,下面是一个例子:

var newElement = document.createElement("p");
var textNode = document.createTextNode("New Paragraph");
newElement.appendChild(textNode);

3.2 添加元素

可以通过appendChild()方法向现有元素添加一个新元素,下面是一个例子:

var parentElement = document.getElementById("parent");
var newElement = document.createElement("p");
parentElement.appendChild(newElement);

3.3 删除元素

可以通过removeChild()方法从父元素中删除指定元素,下面是一个例子:

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");
parentElement.removeChild(childElement);

总结:

JavaScript HTML DOM API提供了丰富的功能,使我们能够简单地改变HTML内容和样式。通过这篇文章,您学习了如何使用JavaScript HTML DOM API来获取、改变、添加和删除HTML元素。这些技术可以应用于许多应用程序,包括创建动态的Web游戏,增强用户交互性,并更改网页上的数据。