HTML DOM(文档对象模型)是 JavaScript 用于操纵 HTML 网页的一种方法。使用 HTML DOM,您可以改变 HTML 元素的内容、属性和样式。因此,JavaScript HTML DOM - 改变 HTML 对于创建动态 Web 页面非常重要。
下面是如何使用 JavaScript HTML DOM 改变 HTML 元素的内容的一个示例:
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮改变内容:</p>
<button onclick="document.getElementById('demo').innerHTML = '我的内容已经改变了!'">点击我</button>
</body>
</html>
在这个示例中,我们使用了 document.getElementById() 方法来获取段落元素,并使用 .innerHTML 属性来改变其内容。当用户点击按钮时,就会触发改变内容的操作。
除了改变 HTML 元素的内容,您还可以使用 JavaScript HTML DOM 改变 HTML 元素的属性。例如,您可以更改元素的图像、链接或样式。下面是一个更改图像属性的示例:
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="sun.jpg" width="100" height="100">
<p>点击按钮更换图像:</p>
<button onclick="document.getElementById('myImage').src='moon.jpg'">点击我</button>
</body>
</html>
JavaScript 可以动态改变 HTML 元素的内容,改变元素的属性,添加、删除、替换元素。
改变 HTML 元素的内容:
document.getElementById("myHeading").innerHTML = "Hello World!";
上面的代码通过使用 getElementById() 方法,选择了一个元素,然后把它的内容改成了 "Hello World!"。
改变 HTML 元素的属性:
document.getElementById("myImage").src = "landscape.jpg";
上面的代码通过使用 getElementById() 方法,选择了一个元素,然后把它的 src 属性改成了 "landscape.jpg"。
添加元素:
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("myDiv");
element.appendChild(para);
上面的代码通过使用 createElement() 和 createTextNode() 方法,创建了一个段落元素和一个文本节点,并将文本节点添加到段落元素中。然后通过 getElementById() 方法,选择了一个元素,并将段落元素添加到它中。
删除元素:
var parent = document.getElementById("myList");
var child = document.getElementById("listItem");
parent.removeChild(child);
上面的代码通过使用 getElementById() 方法,选择了一个父元素和一个子元素,然后使用 removeChild() 方法,删除了这个子元素。
替换元素:
var parent = document.getElementById("myList");
var oldChild = document.getElementById("listItem");
总之,JavaScript HTML DOM 改变 HTML 的功能是非常强大且常用的,可以帮助开发人员更好的进行开发。