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游戏,增强用户交互性,并更改网页上的数据。